Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Creating Reducer | Redux Toolkit Challenge Workshop
Redux Toolkit & React

Challenge: Creating ReducerChallenge: Creating Reducer

Step 3

Focus on creating a reducer to handle dispatched actions and update the goals state in the Redux store. Reducers are pure functions that specify how the state should change in response to actions.

Example

Here is the code from the recording: GitHub

Challenge

  1. Open the goalReducer.js file.
  2. Create the reducer using the createReducer function from the @reduxjs/toolkit package. This function simplifies the process of creating reducers.
  3. Set the initial state of the goals to an empty array ([]).
  4. Inside the createReducer function, specify the cases for different actions using the actions created in the goalAction.js file.
  5. For adding a goal, use the .addCase method and pass in the addGoal action as the first argument. In the corresponding callback function, update the state by pushing the action.payload (the goal) into the state array.
  6. For removing a goal, use the .addCase method and pass in the removeGoal action as the first argument. In the corresponding callback function, update the state by returning a new array that filters out the goal with the matching goal.id from the state array.
  1. The createReducer function simplifies the process of creating reducers by providing a convenient syntax.
  2. Use the .addCase method of the builder object to specify the cases for different actions.
  3. Access the payload of the action using action.payload.

Все було зрозуміло?

Секція 3. Розділ 5
course content

Зміст курсу

Redux Toolkit & React

1. Introduction to Redux Toolkit

What is in this Course?Introduction to State ManagementUnderstanding Redux ToolkitInstallation of Redux ToolkitCreating a React Redux Toolkit ProjectChallenge: Installation of Redux ToolkitAdditional Software

2. Redux Toolkit in Practice

What AwaitsProject's Initial Code and File StructureCreating Redux StoreIntegrating Redux Store into the AppStore Inspection in the AppActions and Action CreatorsReducers RoleActions and Reducers InspectionConnecting Redux and ReactCompleting App Code

3. Redux Toolkit Challenge Workshop

OverviewChallenge RulesChallenge: Setting up the StoreChallenge: Creating ActionsChallenge: Creating ReducerChallenge: Involving Redux into ReactRedux Toolkit Sum Up

Redux Toolkit & React

Challenge: Creating ReducerChallenge: Creating Reducer

Step 3

Focus on creating a reducer to handle dispatched actions and update the goals state in the Redux store. Reducers are pure functions that specify how the state should change in response to actions.

Example

Here is the code from the recording: GitHub

Challenge

  1. Open the goalReducer.js file.
  2. Create the reducer using the createReducer function from the @reduxjs/toolkit package. This function simplifies the process of creating reducers.
  3. Set the initial state of the goals to an empty array ([]).
  4. Inside the createReducer function, specify the cases for different actions using the actions created in the goalAction.js file.
  5. For adding a goal, use the .addCase method and pass in the addGoal action as the first argument. In the corresponding callback function, update the state by pushing the action.payload (the goal) into the state array.
  6. For removing a goal, use the .addCase method and pass in the removeGoal action as the first argument. In the corresponding callback function, update the state by returning a new array that filters out the goal with the matching goal.id from the state array.
  1. The createReducer function simplifies the process of creating reducers by providing a convenient syntax.
  2. Use the .addCase method of the builder object to specify the cases for different actions.
  3. Access the payload of the action using action.payload.

Все було зрозуміло?

Секція 3. Розділ 5
some-alt