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
In the code editor, print the entire object returned by createSlice(). Note how each action type corresponds to the name of a case reducer.
At the bottom of favoriteRecipesSlice.js, export the reducer as the default export.