# Step 1: Set up the store
Focus on setting up the Redux store and integrating it into the entire app. The Redux store serves as a central place to store the application's state, and connecting it to the app allows components to access the state and dispatch actions.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
    <style>
      /* Custom Player Styles */
      .custom-player .plyr--video .plyr__controls {
        background-color: #1e2635;
        padding-bottom: 15px;
        padding-top: 15px;
      }

      .custom-player .plyr__control {
        color: #ff8a00;
      }

      .custom-player .plyr__control:hover,
      .custom-player .plyr--video .plyr__control[aria-expanded="true"] {
        color: white;
      }

      .custom-player .plyr__progress--played {
        background-color: #4f5e77;
      }

      .custom-player .plyr__progress--buffer {
        background-color: #36445c;
      }

      .custom-player .plyr__volume--display {
        color: #ff8a00;
      }

      .custom-player .plyr__control.plyr__tab-focus,
      .custom-player .plyr__control[aria-expanded="true"] {
        background-color: #ff8a00;
        color: #323232;
      }

      .custom-player .plyr__menu__value[data-value="0.5"] {
        color: #ff8a00;
      }

      .custom-player .plyr__controls .plyr__controls__item.plyr__time {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__menu__container .plyr__control > span {
        font-family: "Hind Siliguri", sans-serif;
        align-items: inherit;
        display: flex;
        width: 100%;
        color: #36445c;
        font-size: 16px;
      }

      .custom-player .plyr__control--overlaid svg {
        left: 5px;
        position: relative;
        fill: white;
        width: 40px;
        height: 40px;
        margin: 10px;
      }

      .custom-player .plyr__progress .plyr__tooltip {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__progress input[type="range"] {
        cursor: pointer;
      }

      .custom-player .plyr__control {
        color: white;
      }

      .plyr__control.plyr__control--overlaid {
        background-color: #ff8a00;
      }

      .custom-player .plyr__progress input[type="range"] {
        color: #ff8a00;
      }

      .custom-player .plyr__volume input[type="range"] {
        color: #ff8a00;
        cursor: pointer;
      }

      .custom-player .plyr__control:hover {
        background-color: #ff8a00;
        color: white !important;
      }

      .custom-player
        .plyr__menu__container
        .plyr__control[role="menuitemradio"][aria-checked="true"]:before {
        background-color: #ff8a00;
      }

      .custom-player .plyr__control:hover span {
        color: white;
      }

      .plyr--video {
        border: 3px solid #4f5e77;
        border-radius: 10px;
      }

      /* Custom Transcript Styles */
      .transcript {
        margin-top: 20px;
        padding: 10px;
        line-height: 1.5;
        height: 200px;
        overflow-y: auto;
        border: 3px solid #4f5e77;
        border-radius: 10px;
        background-color: white;
      }

      .highlight {
        background-color: #ff8a00;
        color: white;
        font-weight: 600;
        padding: 5px;
        transition: 0.2s ease-in;
      }

      .my-hidden {
        display: none;
      }

      .show-transcript-btn {
        margin-top: 30px;
        background-color: #ff8a00;
        font-family: inherit;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        padding: 7px 14px;
        cursor: pointer;
        border: none;
        transition: 0.5s ease-in-out;
      }

      .show-transcript-btn:hover {
        background-color: #d27204;
      }
    </style>
  </head>
  <body>
    <div class="custom-player">
      <video
        width="100%"
        controls
        poster="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/redux/challenge-set-up-store-video-poster-v2.png"
      >
        
        <source
          src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/redux/challenge-redux-store-recording.mp4"
          type="video/mp4"
          data-plyr-config='{
          "quality": {
            "default": "720",
            "options": ["144", "240", "360", "480", "720", "1080"]
          }
        }'
        />
      </video>
    </div>
    <button class="show-transcript-btn js-show-transcript-btn">
      Show Transcript
    </button>
    <div class="transcript my-hidden"></div>

    <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
    <script>
      const showTranscriptBtn = document.querySelector(
        ".js-show-transcript-btn"
      );

      showTranscriptBtn.addEventListener("click", handleClick);

      function handleClick() {
        const transcriptElement = document.querySelector(".transcript");
        transcriptElement.classList.toggle("my-hidden");

        if (transcriptElement.classList.contains("my-hidden")) {
          showTranscriptBtn.textContent = "Show Transcript";
        } else {
          showTranscriptBtn.textContent = "Hide Transcript";
        }
      }

      const player = new Plyr(".custom-player video", {
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "mute",
          "volume",
          "captions",
          "settings",
          "fullscreen",
        ],
        volume: 0.5,
        muted: false,
        settings: ["captions", "quality", "speed"],
        captions: {
          active: true,
          language: "en",
        },
        fullscreen: {
          enabled: true,
          fallback: true,
          iosNative: true,
        },
        speed: {
          selected: 1,
          options: [0.5, 1, 1.5, 2],
        },
        quality: {
          default: "720",
          options: ["144", "240", "360", "480", "720", "1080"],
        },
      });

      player.on("qualitychange", (event) => {
        console.log(`Quality changed to ${event.quality}`);
      });

      player.on("ratechange", (event) => {
        console.log(`Speed changed to ${event.detail.plyr.speed}`);
      });

      /*
        Change the transcript data:
          - "start" is the time in seconds indicating from what time the text must be shown.
          - "end" is the time in seconds indicating when the text must be hidden.
          - "text" is the text to be shown.
        NOTE: We can specify any time segments (any start/end). It doesn't have to be exactly 10s.
      */
      const transcriptData = [
        {
          start: 0,
          end: 28,
          text: "Step one would be to setup Redux store. We go to the store.js file and to create the store, configureStore from the @reduxjs/toolkit package helps us. So I have to import it. Import from the @reduxjs/toolkit package. Next I have to import the reducer for the ships.",
        },
        {
          start: 28,
          end: 50,
          text: "It is in the reducers folder shipReducer.js file but it is absolutely empty. We'll work on it a little bit later. So import shipReducer from reducers folder shipReducer.js file. All right.",
        },
        {
          start: 50,
          end: 84,
          text: "Now const store = configureStore. All right here are our options. It is reducer, ships, shipReducer. Now we can export default the store. Okay as our store is set up we can provide this store to the entire app.",
        },
        {
          start: 84,
          end: 103,
          text: "We will do it inside of the index.js file. We need the Provider, import provider from the react-redux package. We have to wrap the entire app with the Provider.",
        },
        {
          start: 107,
          end: 128,
          text: "Also for the Provider we have to provide store prop = {store} and this store is from the redux/store file. It is exactly that store that we have just created.",
        },
      ];

      const transcriptElement = document.querySelector(".transcript");

      function updateTranscript(currentTime) {
        // Clear previous transcript highlighting
        transcriptElement.querySelectorAll("p").forEach((p) => {
          p.classList.remove("highlight");
        });

        // Find the current segment based on the current time
        const currentSegment = transcriptData.find(
          (segment) =>
            currentTime >= segment.start && currentTime <= segment.end
        );

        // Highlight the current segment's text
        if (currentSegment) {
          const currentSegmentElement = transcriptElement.querySelector(
            `p[data-start="${currentSegment.start}"][data-end="${currentSegment.end}"]`
          );
          if (currentSegmentElement) {
            currentSegmentElement.classList.add("highlight");
          }
        }
      }

      function scrollToCurrentSegment() {
        const currentSegment = transcriptElement.querySelector(".highlight");
        if (currentSegment) {
          const transcriptElementHeight = transcriptElement.offsetHeight;
          const segmentOffsetTop = currentSegment.offsetTop;
          const segmentOffsetHeight = currentSegment.offsetHeight;

          // Calculate the top and bottom positions of the current segment
          const segmentTop = segmentOffsetTop - transcriptElement.offsetTop;
          const segmentBottom = segmentTop + segmentOffsetHeight;

          // Calculate the center position of the transcript div
          const transcriptCenter = transcriptElementHeight / 2;

          // Calculate the scroll offset to center the current segment
          const scrollOffset =
            segmentOffsetTop -
            transcriptElement.offsetTop +
            segmentOffsetHeight / 2 -
            transcriptCenter;

          transcriptElement.scrollTo({
            top: scrollOffset,
            behavior: "smooth",
          });
        }
      }

      player.on("timeupdate", (event) => {
        const currentTime = event.detail.plyr.currentTime;
        updateTranscript(currentTime);
        scrollToCurrentSegment();
      });

      const transcriptHTML = transcriptData
        .map(
          (segment) =>
            `<p data-start="${segment.start}" data-end="${segment.end}">${segment.text}</p>`
        )
        .join("");

      transcriptElement.innerHTML = transcriptHTML;
    </script>
  </body>
</html>

## Challenge
1. Open the `store.js` file located in the `redux` folder.
2. Use the `configureStore` function from the `@reduxjs/toolkit` package to create the Redux store. This function provides a streamlined approach to setting up the store, with sensible defaults and built-in middleware.
3. In the `index.js` file, modify the code to integrate the created store into the entire app.
4. Import the `Provider` component from the `react-redux` package.
5. Wrap the `App` component with the `Provider` component. This makes the Redux store available to all components within the app.
6. Pass the `store` prop to the `Provider` component. This connects the app to the created Redux store, allowing components to access the store's state and dispatch actions.

Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.

Explore the significance of additional tools that amplify the efficiency and productivity of React applications. Optimize performance. Furthermore, this revision will guarantee a robust groundwork as you delve into more advanced topics.

Discover how to implement navigation and routing in React apps using React Router. Learn about the core concepts of routes and URLs and how React Router facilitates the creation of dynamic, multi-page applications with seamless transitions between different views.

Research the capabilities of Redux Toolkit, which streamlines state management in React-Redux applications. This library provides opinionated tools and best practices, empowering developers to craft cleaner and more efficient code.

Formik is a powerful library that empowers React developers to quickly manage forms with optimal efficiency and best practices. We will explore the high-level capabilities of Formik, guiding you through the best practices for building robust and user-friendly forms in your React apps.

Master testing React applications with Jest. Learn how to ensure code quality, prevent bugs, and confidently refactor your projects with Jest's powerful features tailored for React testing.

Uncover suitable actions to take next by aligning them with your goals and interests.

Expert React

Challenge: Store

Step 1: Set up the store

Example

Challenge