Maîtriser Redux Toolkit : simplifiez la gestion de l'état dans votre application React

Redux Toolkit : simplifier la gestion des états dans React

Redux Toolkit est une bibliothèque officielle, avisée et puissante qui simplifie le processus de configuration de Redux dans vos applications. Redux, bien qu'immensément puissant, peut nécessiter beaucoup de code passe-partout pour gérer la gestion des états, la création d'actions et les réducteurs. Redux Toolkit (RTK) est conçu pour rendre le développement Redux plus facile et plus efficace en fournissant un ensemble de fonctions utilitaires qui simplifient les tâches courantes.

Avec Redux Toolkit, vous pouvez configurer des magasins, écrire des réducteurs et définir des actions de manière plus concise et organisée. Il comprend également certains paramètres par défaut qui aident les développeurs à éviter les erreurs courantes et le code passe-partout.

---

1. Qu'est-ce que la boîte à outils Redux ?

Redux Toolkit est la bibliothèque officielle recommandée pour écrire la logique Redux de manière plus structurée, concise et conviviale. Il permet d'éliminer le besoin de code répétitif en fournissant des utilitaires qui réduisent la complexité des configurations Redux, tels que la gestion automatique des mises à jour d'état immuables et la simplification des créateurs et des réducteurs d'actions.

---

2. Fonctionnalités principales de Redux Toolkit

Redux Toolkit fournit plusieurs fonctionnalités et utilitaires intégrés pour rationaliser l'utilisation de Redux :

1. configureStore

configureStore simplifie la configuration du magasin en ajoutant automatiquement un middleware essentiel comme redux-thunk pour les actions asynchrones et en configurant Redux DevTools pour le débogage.

Exemple :

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• configureStore gère la création du magasin, la rendant plus facile et plus standardisée par rapport à la fonction createStore.

2. créerSlice

createSlice est un utilitaire qui simplifie la création de tranches Redux, qui représentent une partie de l'état Redux et incluent à la fois des réducteurs et des actions.

Exemple :

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createSlice génère automatiquement des créateurs d'action et des types d'action en fonction des fonctions de réduction que vous définissez.

3. créerAsyncThunk

createAsyncThunk est un outil permettant de gérer la logique asynchrone, comme la récupération de données à partir d'une API et de l'intégrer dans votre état Redux. Il génère un ensemble de créateurs d'actions (états en attente, exécutés et rejetés) pour gérer le flux asynchrone.

Exemple :

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• createAsyncThunk aide à gérer les requêtes asynchrones dans Redux d'une manière claire et facile à comprendre.

4. createEntityAdapter

createEntityAdapter est un utilitaire pour gérer les données normalisées dans Redux. Il vous aide à gérer efficacement les collections de données, telles que les listes d'éléments.

Exemple :

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createEntityAdapter simplifie le travail avec des collections de données (telles que des listes ou des tableaux), permettant une gestion plus facile des entités comme l'ajout, la mise à jour ou la suppression de données.

---

3. Avantages de Redux Toolkit

1. Moins de passe-partout

RTK réduit considérablement la quantité de code passe-partout requis pour configurer Redux. Au lieu d'écrire manuellement des types d'actions, des créateurs d'actions et des réducteurs, vous pouvez désormais utiliser createSlice pour tout générer automatiquement.

2. Mises à jour immuables (via Immer.js)

RTK utilise Immer.js sous le capot, ce qui vous permet d'écrire du code "mutatif" dans vos réducteurs. Cependant, Immer garantit que l'état reste immuable en créant automatiquement des copies de l'état et en leur appliquant des mutations.

3. Meilleure expérience de développeur

En configurant automatiquement un middleware comme redux-thunk et en s'intégrant à Redux DevTools, Redux Toolkit facilite le débogage et la surveillance de votre état Redux. Vous pouvez également utiliser facilement des outils tels que TypeScript, car RTK offre une excellente prise en charge de la sécurité des types.

4. Logique asynchrone simplifiée

La fonction createAsyncThunk aide à gérer une logique asynchrone complexe et l'intègre de manière transparente dans votre état Redux, réduisant ainsi la complexité de la gestion des opérations asynchrones.

5. Normaliser les données avec createEntityAdapter

RTK fournit des utilitaires tels que createEntityAdapter pour gérer les données normalisées. Ceci est particulièrement utile pour gérer de grands ensembles de données (par exemple, des listes d'utilisateurs, de produits, etc.) dans Redux.

---

4. Configuration de Redux Toolkit dans une application React

Voici un guide de base pour configurer Redux Toolkit dans une application React.

Étape 1 : Installer Redux Toolkit et React-Redux

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk(
  'data/fetchData', 
  async (url) => {
    const response = await fetch(url);
    return response.json();
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default dataSlice.reducer;

Étape 2 : Créer des tranches et des réducteurs

Utilisez createSlice pour définir votre tranche Redux, qui contiendra à la fois les actions et les réducteurs pour un élément d'état spécifique.

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

const usersAdapter = createEntityAdapter();

const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;

Étape 3 : Configurer le magasin

Ensuite, configurez le magasin Redux avec configureStore.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Étape 4 : Utiliser Redux dans les composants React

Enveloppez votre application avec le composant Provider de React-redux pour rendre le magasin Redux disponible dans toute votre application.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• useSelector : accède à l'état Redux.
• useDispatch : distribue des actions pour modifier l'état.

---

5. Conclusion

Redux Toolkit simplifie le processus de travail avec Redux en supprimant le code passe-partout et en proposant des fonctions utilitaires telles que createSlice, createAsyncThunk et configureStore. En utilisant RTK, les développeurs peuvent se concentrer sur la logique principale de l'application sans se soucier des complexités de la configuration Redux.

Avec RTK, vous pouvez gérer à la fois l'état synchrone et asynchrone de manière plus efficace et plus maintenable, ce qui en fait un excellent choix pour les applications React plus volumineuses.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!