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