Kursusindhold

State Management with Redux Toolkit in React

1. Getting Started with Redux Toolkit

What You Will Learn in This Course Introduction to State Management Understanding Redux Toolkit Installing Redux Toolkit Creating Your First React Redux Toolkit Project Challenge: Installing Redux Toolkit Additional Software

2. Applying Redux Toolkit in React

What Awaits Understanding the Project Code and File Structure Creating the Redux Store Integrating the Redux Store Into the React App Inspecting the Store in the React App Understanding Actions and Action Creators Understanding the Role of Reducers Inspecting Actions and Reducers in Redux Connecting Redux with React Components Completing the App

3. Redux Toolkit Challenge Workshop

Overview of the Challenge Challenge Guidelines and Rules Challenge: Setting Up the Redux Store Challenge: Creating Redux Actions Challenge: Implementing the Reducer Challenge: Connecting Redux with React Redux Toolkit Summary

Installing Redux Toolkit

1. Create a React Project

If you don't have a React project yet, create one using Create React App. Open your terminal and run:

npx create-react-app my-great-app
cd my-great-app

2. Installing Redux Toolkit

Navigate to your project directory and install Redux Toolkit:

npm install @reduxjs/toolkit

3. Installing Additional Dependencies

Redux Toolkit may require additional dependencies like react-redux. This way, we can use Redux in React. Install them using:

npm install react-redux

Once you have completed all the instructions, make sure to check that your package.json file includes the dependencies listed below:

"dependencies": {
  "@reduxjs/toolkit": "^1.9.7",
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^8.1.3",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},

Your project structure is supposed to look like the following:

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 4

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat