For creating a slice, we first import the createSlice function from Redux Toolkit:

import { createSlice } from '@reduxjs/toolkit';

The createSlice function takes in an object having name, initialValue, and reducers keys. Following is the code from todosSlice, which we imported in the last chapter:

export const todosSlice = createSlice({
    name: 'todo',
    initialState: ['Finish the application'],
    reducers: {
        addTodo: (state, action) => {
            const item = action.payload;
            if(item != '') {
                state.push(item);
            }
        }
    }
});

The name is supposed to be the feature's name and can be anything.

We provide an initialState to the slice so that it's initiated with this value. The initialState can be anything ranging from a simple to a complicated nested object.

The reducers key contains an object in which every key represents an action name. The values of these keys are functions that are supposed to contain logic for those actions. When the addTodo action is dispatched, it is handled by the corresponding inline function.

In the above case, the inline function for addTodo action has two arguments: state and action. state represents the slice's state. In contrast, action represents the action object and can be optionally omitted.

The action object contains the type key however, there is a key called payload, which may hold additional data if any has been passed.

In the Redux store, we looked at in the previous chapter, there was a Todo slice:

export const store = configureStore({
  reducer: {
    todos: todosReducer
  },
});

However, we didn’t know what data it would have initially. After looking at the initialValue of the todosSlice we can tell that the initial state of the store will be something like this:

{
    todos: [
        "Finish the application"
    ]
}