Redux Toolkit: `createSlice` Bundles Your Redux Logic

WHY IT EXISTS Classic Redux required manually creating action type constants, action creator functions, and reducer logic (often with a switch statement), all in separate files. This was verbose, error-prone, and hard to navigate. createSlice was created to co-locate this related logic and eliminate the boilerplate.

THE MENTAL MODEL Think of createSlice as a factory for a self-contained "slice" of your global state. You provide the blueprint—initial data and functions to change that data—and it hands you back a finished product: the reducer to manage the state and the action creators to trigger the changes, all pre-wired and ready to use.

HOW IT WORKS You call createSlice with an object containing three key properties: a name (string, like 'user'), an initialState, and a reducers object. The name is used to prefix generated action types (e.g., 'user/setName'). The keys in the reducers object (e.g., 'setName') become the names of the action creators you can dispatch. The functions themselves define the logic. Crucially, createSlice uses Immer internally, so you can write code that looks like it's mutating state directly (e.g., state.name = action.payload), and Immer will handle creating a correct, immutable update behind the scenes. The function returns an object containing the generated actions and the final reducer.

WHEN TO USE IT Use createSlice for virtually all Redux state management in a modern application using Redux Toolkit. It is the standard, recommended approach for defining your store's structure, feature by feature. For example, you would create a usersSlice, a postsSlice, and a notificationsSlice, then combine their reducers in the main store.

WHEN NOT TO USE IT While createSlice is the default, you might use lower-level APIs like createReducer and createAction if you have a very complex scenario where you need to handle the same action type in multiple slices differently. The biggest footgun is attempting to use its Immer-powered "mutation" syntax outside of the reducers it creates; this will cause bugs in plain Redux logic.

ONE CANONICAL EXAMPLE To create a simple counter, you define a slice: const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1 } } }). This single block generates the reducer logic and an action creator, counterSlice.actions.increment, which you can dispatch from your UI. The action type 'counter/increment' is created automatically.