Learn

Let’s now take a closer look at reducer in the return object of createSlice().

const options = { // options fields omitted. } const todosSlice = createSlice(options); /* Object returned by todosSlice */ { name: 'todos', reducer: (state, action) => newState, actions: { addTodo: (payload) => ({type: 'todos/addTodo', payload}), toggleTodo: (payload) => ({type: 'todos/toggleTodo', payload}) }, // case reducers field omitted }

todosSlice.reducer is the complete reducer function, a.k.a the “slice reducer”.

When an action with the type 'todos/addTodo' is dispatched, todosSlice will execute todosSlice.reducer() to check if the dispatched action’s type matches one of todos.actions case reducers. If so, it will run the matching case reducer function and if not, it will return the current state. This is exactly the same pattern that we had previously implemented with switch/case statements!

Finally, todosSlice.reducer needs to be exported so that it can be passed to the store and be used as the todos slice of state. While the todosSlice.actions are exported as named exports, the todosSlice.reducer value is used as the default export.

export const { addTodo, toggleTodo } = todosSlice.actions; export default todosSlice.reducer

Instructions

1.

In the code editor, print the entire object returned by createSlice(). Note how each action type corresponds to the name of a case reducer.

2.

At the bottom of favoriteRecipesSlice.js, export the reducer as the default export.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?