intermediate
Redux Toolkit
Use slices, configureStore, Immer-powered reducers, typed hooks, and modern Redux defaults.
Redux Toolkit (RTK) is the official Redux style: `configureStore`, `createSlice`, Immer reducers, typed hooks, and entity adapters. It removes boilerplate while keeping predictable data flow.
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
incremented(state) {
state.value += 1;
},
},
});
const store = configureStore({
reducer: { counter: counterSlice.reducer },
});
type RootState = ReturnType<typeof store.getState>;
type AppDispatch = typeof store.dispatch;
Export typed `useAppDispatch` and `useAppSelector` wrappers. Split features into slices; combine in the store reducer map.
The trade-off is less boilerplate and safer defaults versus opinionated structure and Immer magic hiding copies.
On interviews: what RTK changes versus hand-written Redux; when slices are enough without RTK Query.
Common pitfalls: one giant slice, disabling serializable check without understanding why, and putting fetch logic in slices instead of RTK Query.
Checklist:
- createSlice per feature domain.
- configureStore with typed hooks.
- Entity adapters for normalized lists.
- RTK Query when remote cache is the problem.