What is a slice in Redux Toolkit?

Q: What is a slice in Redux Toolkit?

**name:** A string name for the slice that is used as a prefix for the generated action types (e.g., counter/increment). **initialState:** The starting value for that specific piece of the Redux state. **reducers:** An object where the keys are the names of the actions (like increment or decrement) and the values are functions that define how the state should change. Defines a portion of the Redux state (e.g., user, counter, todos). Ideally this portion of the state represents state for a feature. Automatically generates **action creators** and **action types** based on reducers. Simplifies reducer logic by allowing **direct state mutation** using Immer. Keeps related logic (actions + reducers) together for better organization. import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', // slice name initialState: { value: 0 }, // state for this slice reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, incrementByAmount: (state, action) => { state.value += action.payload; } } }); export const { increment, decrement, incrementByAmount } = counterSlice.actions; export default counterSlice.reducer;

Difficulty: 5/10

createSlice, reducers & actions, state organization

In Redux Toolkit, a slice is a collection of reducer logic and actions for a single feature of your application. It combines the state, action creators, and reducers for that feature into a single, easy-to-manage unit.

When you define a slice, you provide an object to `createSlice` function with three main properties:

1
name: A string name for the slice that is used as a prefix for the generated action types (e.g., counter/increment).
2
initialState: The starting value for that specific piece of the Redux state.
3
reducers: An object where the keys are the names of the actions (like increment or decrement) and the values are functions that define how the state should change.

Key Features of a Slice

1
Defines a portion of the Redux state (e.g., user, counter, todos). Ideally this portion of the state represents state for a feature.
2
Automatically generates action creators and action types based on reducers.
3
Simplifies reducer logic by allowing direct state mutation using Immer.
4
Keeps related logic (actions + reducers) together for better organization.

Example: Creating a Slice

Scenario Questions

0-2 years experience

2-5 years experience

Follow-up Questions