How to Create a Slice in Redux Toolkit: Simple Guide

To create a slice in Redux Toolkit, use the createSlice function by providing a slice name, initial state, and reducers. This generates action creators and a reducer automatically, simplifying Redux setup.

Syntax

The createSlice function requires an object with these keys:

• name: a unique string for the slice
• initialState: the starting state value
• reducers: an object where keys are reducer names and values are reducer functions that update state

This function returns an object containing the slice reducer and generated action creators.

javascript

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

const slice = createSlice({
  name: 'sliceName',
  initialState: {},
  reducers: {
    reducerName(state, action) {
      // update state logic
    }
  }
});

export const { reducerName } = slice.actions;
export default slice.reducer;

Example

This example creates a counter slice with increment and decrement actions. It shows how to define the slice and use the generated reducer and actions.

javascript

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value += 1;
    },
    decrement(state) {
      state.value -= 1;
    }
  }
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

store.dispatch(counterSlice.actions.increment());
store.dispatch(counterSlice.actions.increment());
store.dispatch(counterSlice.actions.decrement());

console.log(store.getState());

Output

{"counter":{"value":1}}

Common Pitfalls

Common mistakes include:

• Not providing a unique name for the slice, causing action type conflicts.
• Mutating state incorrectly outside of reducers or forgetting that Redux Toolkit uses Immer to allow direct state mutation syntax.
• Forgetting to export the generated actions or reducer properly.

javascript

/* Wrong: Missing unique name and incorrect state mutation */
const badSlice = createSlice({
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      return { count: state.count + 1 }; // works but less idiomatic
    }
  }
});

/* Right: Provide name and use Immer style mutation */
const goodSlice = createSlice({
  name: 'good',
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1; // Immer allows this
    }
  }
});

Quick Reference

Remember these tips when creating slices:

• Always give a unique name to your slice.
• Use initialState to set starting values.
• Write reducers with direct state mutation syntax; Redux Toolkit handles immutability.
• Export actions and reducer for use in your store and components.

Key Takeaways

Use createSlice with name, initialState, and reducers to create Redux logic easily.

Reducers can mutate state directly thanks to Redux Toolkit's Immer integration.

Always export the generated actions and reducer for use in your app.

Provide a unique slice name to avoid action type conflicts.

Configure your store with the slice reducer to manage state.