# What Is a Slice in Redux? Simplifying State Management with Redux Toolkit

> Understand what a slice is in Redux and how Redux Toolkit simplifies state management. Discover the createSlice API for less boilerplate and efficient app development.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: deep-dive
- Published: 2026-02-21

---

**A slice in Redux is a cohesive bundle that combines a feature's state, reducers, and automatically generated action creators into a single definition, eliminating the boilerplate required by traditional Redux patterns through the `createSlice` API in Redux Toolkit.**

Modern React applications—such as those built with the `facebook/react` repository—often rely on Redux for predictable state management. However, traditional Redux requires developers to manually write action type constants, separate action creator functions, and verbose switch-case reducers. A **slice in Redux**, introduced via Redux Toolkit's `createSlice` function, consolidates this logic into a single, maintainable definition that reduces code volume and prevents common mutation errors.

## What Is a Slice in Redux?

A slice represents a "slice" of the global Redux state dedicated to a specific feature—such as user authentication, shopping cart data, or UI theme settings. Defined via `createSlice` in files like [`src/features/counter/counterSlice.ts`](https://github.com/facebook/react/blob/main/src/features/counter/counterSlice.ts), each slice encapsulates three tightly-coupled elements:

- **Slice state**: The initial state shape and default values for this domain.
- **Reducers**: Pure functions that determine how the slice's state updates in response to actions.
- **Action creators**: Auto-generated functions that dispatch actions with the correct `type` and payload.

## How createSlice Works: The Three Core Components

### Slice State

The slice defines its initial state structure within the `initialState` property. This localizes state shape documentation to the feature file rather than scattering it across separate constants files. For example, in [`src/features/counter/counterSlice.ts`](https://github.com/facebook/react/blob/main/src/features/counter/counterSlice.ts), the state is typed as `{ value: number }` and initialized to `{ value: 0 }`.

### Reducers

Reducers in `createSlice` are defined as an object of functions keyed by action names. Unlike traditional Redux, these reducers can use "mutating" syntax—such as `state.value += 1`—because Redux Toolkit integrates **Immer** under the hood. Immer tracks mutations and produces a new immutable state object, preventing accidental direct state mutations while allowing intuitive code.

### Action Creators

When `createSlice` executes, it automatically generates action creator functions based on the reducer keys. For a reducer named `increment`, the API produces `counterSlice.actions.increment`, a typed function that returns an action object with the correct `type` property. This eliminates the need to manually define action type constants like `const INCREMENT = 'counter/INCREMENT'` and separate action creator functions.

## Slice in Redux vs. Traditional Redux: A Boilerplate Comparison

Traditional Redux requires developers to maintain separate files for action types, action creators, and reducers. A simple counter implementation might require:

1. **Action type constants**: `const INCREMENT = 'counter/increment'`
2. **Action creators**: Functions returning `{ type: INCREMENT }`
3. **Reducer switch cases**: Handling each action type in a switch statement
4. **Immutable update logic**: Using spread operators or `Object.assign` to ensure state immutability

In contrast, a **slice in Redux Toolkit** consolidates this into a single `createSlice` call in [`src/features/counter/counterSlice.ts`](https://github.com/facebook/react/blob/main/src/features/counter/counterSlice.ts). The API handles action type generation, creator synthesis, and immutability via Immer, reducing the code required for a feature by approximately 60-70% while improving type safety.

## Practical Implementation: Creating a Redux Slice

The following examples demonstrate how slices integrate into a React application structure similar to patterns used in the `facebook/react` ecosystem.

### Defining the Slice

Create the slice definition in a feature-specific file:

```typescript
// src/features/counter/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

type CounterState = {
  value: number;
};

const initialState: CounterState = { value: 0 };

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    // "Mutating" syntax – Immer handles immutability
    increment(state) {
      state.value += 1;
    },
    decrement(state) {
      state.value -= 1;
    },
    // PayloadAction lets us type the payload
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload;
    },
  },
});

// Export the auto-generated action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Export the reducer to be added to the store
export default counterSlice.reducer;

```

### Configuring the Store

Integrate the slice reducer into the Redux store configuration:

```typescript
// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

```

### Using the Slice in React Components

Dispatch slice actions and select slice state in UI components:

```tsx
// src/components/Counter.tsx
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  increment,
  decrement,
  incrementByAmount,
} from '../features/counter/counterSlice';
import type { RootState } from '../app/store';

export const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>
        +5
      </button>
    </div>
  );
};

```

## Key Benefits of Using Slices in Redux Toolkit

Adopting **slices in Redux** provides measurable improvements over traditional patterns:

- **Boilerplate reduction**: Eliminates manual action type constants and action creator functions, reducing file count and lines of code per feature.
- **Immer integration**: Write mutable update logic (e.g., `state.items.push(item)`) while maintaining immutable state guarantees.
- **TypeScript support**: `PayloadAction` types and inferred action creators provide end-to-end type safety without manual type definitions.
- **Colocation**: State shape, reducers, and actions reside in a single file (e.g., [`src/features/counter/counterSlice.ts`](https://github.com/facebook/react/blob/main/src/features/counter/counterSlice.ts)), improving maintainability.
- **DevTools compatibility**: Automatically configured with Redux DevTools extension for time-travel debugging and state inspection.

## Summary

- A **slice in Redux** encapsulates a feature domain's state, reducers, and auto-generated action creators via the `createSlice` API.
- Unlike traditional Redux, slices eliminate boilerplate by automatically generating action types and creators based on reducer definitions.
- Immer integration allows developers to write mutable syntax in reducers while producing immutable state updates.
- Slices promote feature-based colocation, organizing code by domain rather than by technical layer (actions, reducers, types).
- The pattern is implemented in files like [`src/features/counter/counterSlice.ts`](https://github.com/facebook/react/blob/main/src/features/counter/counterSlice.ts) and integrated into the store via `configureStore`.

## Frequently Asked Questions

### What is the difference between a slice and a reducer in Redux?

A reducer is a pure function that receives the current state and an action, then returns new state. A **slice in Redux** is a broader concept that includes the reducer along with its initial state and automatically generated action creators. While a reducer handles state transitions, a slice encapsulates the entire feature domain including the state shape and all associated actions.

### Does createSlice use Immer internally?

Yes, `createSlice` automatically integrates **Immer** to handle immutable updates. This allows developers to write "mutating" code inside reducer functions—such as `state.value += 1` or `state.items.push(action.payload)`—while Immer transparently produces a new immutable state object. This eliminates the need for manual spread operators or `Object.assign` patterns required in traditional Redux.

### Can I use slices with existing traditional Redux stores?

Yes, slices are fully compatible with existing Redux architectures. The `reducer` exported from `createSlice` is a standard Redux reducer function that can be combined with other reducers using `combineReducers` or integrated into legacy store configurations. This allows gradual migration—individual features can adopt slices while the application maintains its existing store structure.

### How do I organize multiple slices in a large React application?

In large applications, organize slices using a **feature-based folder structure**. Place each slice in its own feature directory, such as [`src/features/counter/counterSlice.ts`](https://github.com/facebook/react/blob/main/src/features/counter/counterSlice.ts) or [`src/features/user/userSlice.ts`](https://github.com/facebook/react/blob/main/src/features/user/userSlice.ts). Import each slice's reducer into a central [`src/app/store.ts`](https://github.com/facebook/react/blob/main/src/app/store.ts) file where `configureStore` combines them into the root reducer. This colocation keeps related state logic together and scales more effectively than separating files by technical type (actions, reducers, constants).