# Step 4: Involve Redux logic into React app
Focus on involving Redux logic in a React app. Connect React components and the Redux store to enable state management and 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-involve-redux-to-react-video-poster-v1.png"
      >
        
        <source
          src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/redux/involve-redux-to-react-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: 19,
          text: "Our final step would be involving the Redux logic into our React components. The first feature we would like to add is adding a ship to our array of ships. It is in the Form component right here.",
        },
        {
          start: 19,
          end: 37,
          text: "So right now we have just handleFormSubmit and handleChange and resetForm. Reset the form when a user submits the form. handleChange. It tracks the change of the name and type.",
        },
        {
          start: 37,
          end: 54,
          text: "And form submit does nothing for now because we have to implement its logic. What we need? First of all, we have to import useDispatch hook. Import useDispatch from the react-redux.",
        },
        {
          start: 55,
          end: 94,
          text: "Also, we need addShip action from the shipAction.js file. And now we can use our useDispatch hook. It would be const dispatch = useDispatch(). Now, in the handleFormSubmit, we will say that dispatch and specify the type.",
        },
        {
          start: 94,
          end: 120,
          text: "It is addShip and in the brackets we use braces and we create the object of a new ship. We need an ID, unique identifier for each element. It would be Date.now(). With help of this Date.now() we create a unique ID always.",
        },
        {
          start: 120,
          end: 151,
          text: "Next, it would be the name which will be this name. And finally type. It would be this type. So, we can add the ship right now to the Redux store. Also, let's remove. What we can do in the ship list?",
        },
        {
          start: 151,
          end: 166,
          text: "We render some ships but right now we render an empty array. Because we don't know about the Redux store at all. Also, we would like to remove the ship when a user clicks the remove button.",
        },
        {
          start: 166,
          end: 196,
          text: "First of all, our ships. We need to import useSelector hook. Import useSelector react-redux package. And our ships would be not just an empty array. It would be useSelector. And we will work with the state.",
        },
        {
          start: 196,
          end: 228,
          text: "And we need exactly state.ships. Now, talking about removing the ship, we again need useDispatch hook. Also, we need the action. Import remove action. removeShip action. const dispatch.",
        },
        {
          start: 228,
          end: 255,
          text: "Equals to the useDispatch hook. And in the handleRemoveShip, we can dispatch the removeShip action and provide it here, the ship. Okay, so let's test our final app. So, we would like to specify the ship name, let it be Maria.",
        },
        {
          start: 255,
          end: 279,
          text: "And the type will be bulk. Add ship. We add our ship. The next ship, let it be Viktor. And the ship type would be tanker. Add ship. We have it. So, we would like to remove a ship. We can remove it. So, finally, our project is done.",
        },
      ];

      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
**Form.jsx:**
1. Open the `Form.jsx` file.
2. Import the `useDispatch` hook from the `react-redux` package. This hook will be used to dispatch actions to the Redux store.
3. Import the `addGoal` action from the `goalAction.js` file. This action is responsible for adding a goal to the Redux store.
4. Initialize the `dispatch` variable inside the component by calling the `useDispatch` hook.
5. Complete the `handleFormSubmit` function by dispatching the `addGoal` action. Use the `dispatch` function and pass in an object with the goal details: `{ id: Date.now(), text: goal }`. The `Date.now()` generates a unique ID for each goal.
6. Reset the form after submission by calling the `resetForm` function.

**GoalList.jsx:**
1. Open the `GoalList.jsx` file.
2. Import the `useDispatch` and `useSelector` hooks from the `react-redux` package. These hooks will be used to access the Redux store and dispatch actions.
3. Import the `removeGoal` action from the `goalAction.js` file. This action is responsible for removing a goal from the Redux store.
4. Initialize the `goals` variable using the `useSelector` hook and access the `goals` state from the Redux store.
5. Initialize the `dispatch` variable by calling the `useDispatch` hook.
6. Complete the `handleRemoveGoal` function by dispatching the `removeGoal` action. Pass in the `goal` as a parameter.
7. Finish the logic of rendering the array of goals by mapping over the `goals` array and rendering each goal.
8. Display the text of each goal and add a button with an `onClick` event that calls the `handleRemoveGoal` function and passes in the respective `goal`.

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: Involve Redux into React

Expert React

Challenge: Involve Redux into React