Qu'est-ce que Redux Toolkit (RTK) apporte par rapport au Redux classique ?

Question

IT Interview Practice · Accepted Answer

**Redux Toolkit (RTK)** est la façon officielle et recommandée d'utiliser Redux aujourd'hui. Il élimine le célèbre boilerplate du Redux classique — types d'actions manuels, créateurs d'actions, logique de mise à jour immuable, configuration du store — tout en conservant les mêmes principes fondamentaux.

## Le problème de boilerplate que RTK résout

```js
// ❌ classic Redux — verbose: action types, creators, switch reducers, manual immutability
const INCREMENT = "counter/increment";
const increment = () => ({ type: INCREMENT });
function reducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENT: return { ...state, value: state.value + 1 };
    default: return state;
  }
}
```

## RTK : createSlice fait tout

```js
import { createSlice, configureStore } from "@reduxjs/toolkit";

export const { increment, incrementBy } = counterSlice.actions; // action creators AUTO-generated
const store = configureStore({ reducer: { counter: counterSlice.reducer } });
```

`createSlice` génère automatiquement les types et créateurs d'actions, et — via **Immer** — vous permet d'écrire du code réducteur « mutant » qui est convertis en mises à jour immuables. Une seule tranche concise remplace tous les éléments manuels.

## Ce que d'autre RTK inclut

```text
configureStore   → store setup with DevTools + thunk middleware preconfigured
createAsyncThunk → standard async (pending/fulfilled/rejected actions) for data fetching
createEntityAdapter → normalized state + CRUD reducers for collections
RTK Query        → a full data-fetching/caching layer (like React Query, built into Redux)
```

## Exemple de createAsyncThunk

```js
export const fetchUsers = createAsyncThunk("users/fetch", () => api.getUsers());
// auto-dispatches users/fetch/pending | fulfilled | rejected — handle in extraReducers
```

## Pourquoi RTK est le standard maintenant

```text
✓ ~75% less code than classic Redux
✓ Immer → no manual immutable spread logic (fewer bugs)
✓ Good defaults (DevTools, thunk) out of the box
✓ Encourages best practices (slices, normalized data)
✓ RTK Query bundles server-state management
```

## Pourquoi c'est important

La plus grande critique du Redux classique était son boilerplate ; RTK résout directement ce problème, ce qui explique pourquoi c'est maintenant la **recommandation officielle** et ce que « utiliser Redux » signifie dans les bases de code modernes.

Comprendre `createSlice` (alimenté par Immer, actions générées automatiquement), `createAsyncThunk` (asynchrone), `createEntityAdapter` (normalisation) et RTK Query (état du serveur) est essentiel pour le travail Redux contemporain — cela préserve la prévisibilité de Redux tout en supprimant la cérémonie qui a poussé de nombreuses équipes vers des alternatives.

Le problème de boilerplate que RTK résout

RTK : createSlice fait tout

Ce que d'autre RTK inclut

Exemple de createAsyncThunk

Pourquoi RTK est le standard maintenant

Pourquoi c'est important

Questions connexes