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.