createSlice API

Master the createSlice API for automatic action creators and reducers.

25 min

2 sections

createslice

reducers

actions

01. What is a Slice?

Section 1 of 2

A slice is a collection of Redux reducer logic and actions for a single feature. createSlice simplifies creating them.

typescript

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

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

export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

Exercise

Create a Counter Slice

Practice

Create a slice with increment, decrement, and reset actions.

DevTools Integration

Immer Integration

Back to Course