การสร้าง Slices ด้วย createSlice

A slice is a self-contained piece of Redux logic for one feature of your app. It bundles the initial state, the reducer functions, and the auto-generated action creators together in a single file. The name comes from the idea that each slice represents a portion (slice) of the global Redux state tree.

createSlice is imported from @reduxjs/toolkit and accepts a configuration object with three required fields: name (a string prefix for action types), initialState (the starting value for this slice's state), and reducers (an object of reducer functions). It returns an object containing the slice reducer and the action creators.

Each function you add to the reducers object becomes a case reducer that handles a specific action. RTK uses the Immer library under the hood, so you can write code that appears to mutate state directly — Immer converts it to an immutable update automatically. You never need to spread or copy the state object manually.

createSlice automatically generates an action creator for each reducer function you define. You export them from the slice and call them when dispatching. The action creator name matches the reducer key, and the generated action type string follows the pattern sliceName/reducerName, for example counter/increment.

The createSlice call returns an object with a reducer property. You export this as the default export and then import it in your store configuration. RTK composes all your slice reducers into the single root reducer automatically when you pass them to configureStore.

When using TypeScript, explicitly type your initialState so RTK can infer state and action types throughout the slice. Define an interface for your state and assign it as the type annotation on initialState. RTK will then infer the correct type for the state parameter in every reducer function automatically.

When a reducer receives data from the dispatched action, import PayloadAction from RTK to type the action parameter. PayloadAction<number> tells TypeScript that action.payload must be a number. This prevents accidental mismatches between what the action creator accepts and what the reducer expects.

The prepare callback lets you customize the action creator before RTK dispatches the action. You use it when you need to generate an ID, format data, or add a timestamp to the payload. The object returned by prepare must have a payload field, and optionally meta and error fields.

Sometimes you need to reset a slice to its initial state — for example on user logout. You can return a completely new state value from a reducer instead of mutating. If you return a value, Immer uses it as the next state. This is the correct pattern for resetting or fully replacing state in a slice reducer.

Slices can respond to actions defined in other slices using extraReducers. This avoids tight coupling — instead of importing one slice into another, you import only the action creator. Use the builder.addCase pattern to handle external action types inside your slice without adding them to the reducers key.

Here is a complete, production-ready counter slice combining everything covered so far: a typed state interface, typed action creators with PayloadAction, and a reset action. Import this reducer into configureStore and its actions into components to have a fully working Redux feature.

In this lesson you learned: createSlice bundles initial state, reducers, and action creators together, Immer lets you write mutating-style reducer code that stays immutable, and PayloadAction types the action payload for TypeScript safety. Next up we explore reading state with useSelector.