Challenge: Reducer
Step 3: Create reducer
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
- Open the
goalReducer.jsfile. - Create the reducer using the
createReducerfunction from the@reduxjs/toolkitpackage. This function simplifies the process of creating reducers. - Set the initial state of the goals to an empty array (
[]). - Inside the
createReducerfunction, specify the cases for different actions using the actions created in thegoalAction.jsfile. - For adding a goal, use the
.addCasemethod and pass in theaddGoalaction as the first argument. In the corresponding callback function, update the state by pushing theaction.payload(the goal) into the state array. - For removing a goal, use the
.addCasemethod and pass in theremoveGoalaction as the first argument. In the corresponding callback function, update the state by returning a new array that filters out the goal with the matchinggoal.idfrom the state array.
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 11
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 1.96
Challenge: Reducer
Desliza para mostrar el menú
Step 3: Create reducer
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
- Open the
goalReducer.jsfile. - Create the reducer using the
createReducerfunction from the@reduxjs/toolkitpackage. This function simplifies the process of creating reducers. - Set the initial state of the goals to an empty array (
[]). - Inside the
createReducerfunction, specify the cases for different actions using the actions created in thegoalAction.jsfile. - For adding a goal, use the
.addCasemethod and pass in theaddGoalaction as the first argument. In the corresponding callback function, update the state by pushing theaction.payload(the goal) into the state array. - For removing a goal, use the
.addCasemethod and pass in theremoveGoalaction as the first argument. In the corresponding callback function, update the state by returning a new array that filters out the goal with the matchinggoal.idfrom the state array.
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 11