So far we’ve taken a look at the object that is passed to createSlice()
, but what exactly does it return?
Using todosSlice
from the previous exercise as an example, createSlice()
would return an object that looks like this:
const todosSlice = createSlice({ name: 'todos', initialState: [], reducers: { addTodo(state, action) { const { id, text } = action.payload state.push({ id, text, completed: false }) }, toggleTodo(state, action) { const todo = state.find(todo => todo.id === action.payload) if (todo) { todo.completed = !todo.completed } } } }) /* 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 }
Let’s break this down:
name
holds the value of the string that is used as the prefix for the generated action types.reducer
is the complete reducer function (we’ll take a closer look at this in the next exercise).actions
holds the the auto-generated action creators.
So, what do these auto-generated action objects look like?
By default, the action creator accepts one argument, which it puts into the action object as action.payload
. The action.type
string is generated for us by combining the slice’s name
field with the name of the case reducer function.
console.log(todosSlice.actions.addTodo('walk dog')) // {type: 'todos/addTodo', payload: 'walk dog'}
You’ll need to use the action creators in other files, so at a minimum you could export the entire slice object returned by createSlice()
. However, we’ll use a Redux community code convention called the “ducks” pattern, which suggests that we use named exports for the action creators and export them separately from the reducer.
export const { addTodo, toggleTodo } = todosSlice.actions
Instructions
In favoriteRecipesSlice.js in the code editor, print the name of the slice to the console.
Using a for…in loop, print out the actions in the actions
object.
Export the actions. Remember to use named exports for these.