# Step 2: Create actions
Focus on creating actions for managing goals. Actions are objects that describe the changes we want to make to the state. By creating actions, we can update the Redux store accordingly.

<!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-create-action-video-poster-v1.png"
      >
        
        <source
          src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/redux/action-creation-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: 15,
          text: "Step 2 is creating other actions. We will do it in the source, redux, actions, shipAction.js file. To create an action, we have createAction function from the @redux/toolkit package.",
        },
        {
          start: 15,
          end: 39,
          text: "It simplifies the flow of our action creation. So we have to import it. Import createAction from the @redux/toolkit. And we will have two actions. The first one is addShip and the second is removeShip.",
        },
        {
          start: 39,
          end: 66,
          text: "It will be export const addShip = createAction. And right here we have to specify the type. So it is related to the ships and it is addShip. I will do the same for the remove. So it is add but I need remove right here.",
        },
        {
          start: 67,
          end: 74,
          text: "So we have created two actions right now. The first one is for the adding and the second is for the removing.",
        },
      ];

      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 `goalAction.js` file.
2. Use the correct function from the `@reduxjs/toolkit` package to create actions.
3. Specify the correct action types using the target element `goal` and indicate the action for each action.
4. To remove a goal, set the action type as `goals/removeGoal`.
5. To add a goal, set the action type as `goals/addGoal`.

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: Actions

Step 2: Create actions

Example

Challenge