How is a slice different from a traditional Redux reducer?

Question

Accepted Answer

A slice in Redux Toolkit is a modern abstraction over traditional reducers. It combines state logic, actions, and action creators in one place. Traditional Redux requires **manual setup** for each of these parts, leading to more boilerplate code. In traditional Redux, you manually define action types, action creators, and reducers separately. In RTK, **`createSlice`** auto-generates them for you. Slices allow direct state mutations using **Immer**, while traditional reducers must return new state objects explicitly. A slice keeps **related logic (state, actions, and reducers) together** in one file, while traditional Redux often spreads them across multiple files. Slices simplify setup with **`configureStore`**, reducing boilerplate and improving readability. // Traditional Redux
const initialState = { value: 0 };
const INCREMENT = 'INCREMENT';
export const increment = () => ({ type: INCREMENT });

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, value: state.value + 1 };
    default:
      return state;
  }
}

// Redux Toolkit Slice
import { createSlice } from '@reduxjs/toolkit';

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

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

How is a slice different from a traditional Redux reducer?

Scenario Questions

Follow-up Questions