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

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.