Comment Utiliser Redux avec React.js

Introduction

Redux Toolkit est une bibliothèque officielle pour Redux qui simplifie les configurations et le développement. Dans cet article, nous allons voir comment intégrer Redux Toolkit dans une application React.js en utilisant un exemple simple de gestion d'un compteur.

Pourquoi utiliser Redux Toolkit ?

1. Configuration Simplifiée : Redux Toolkit réduit le boilerplate et simplifie la configuration de Redux.
2. Immutabilité Automatique : Redux Toolkit utilise Immer sous le capot pour gérer l'immutabilité de l'état.
3. Outils Puissants : Il inclut des outils comme createSlice pour simplifier la création des reducers et des actions.

Concepts Clés de Redux

• Store : Le store est un conteneur unique pour l'état global de l'application.
• Actions : Les actions sont des objets qui décrivent des événements ou des intentions de modification de l'état.
• Reducers : Les reducers sont des fonctions pures qui déterminent comment l'état change en réponse à une action.
• Dispatch : La fonction dispatch envoie des actions au store pour déclencher des mises à jour de l'état.

Étapes pour Utiliser Redux Toolkit avec React

1. Installation

Commencez par installer les packages nécessaires :

2. Création du Slice

Créez un fichier counterSlice.js pour définir un slice Redux avec createSlice.

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

export const counterSlice = createSlice({

  name: 'counter',

  initialState: { value: 0 },

  reducers: {

    increment: state => {

      state.value += 1;

    },

    decrement: state => {

      state.value -= 1;

    },

    incrementByAmount: (state, action) => {

      state.value += action.payload;

    },

  },

}); // Les action creators sont générés pour chaque fonction réductrice export const { increment, decrement, incrementByAmount } = counterSlice.actions; export default counterSlice.reducer;

3. Configurer le Store

Créez un fichier store.js pour configurer le store Redux en utilisant configureStore de Redux Toolkit.

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

import counterReducer from './counterSlice';

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

export default store;

4. Fournir le Store à l'Application

Utilisez le composant Provider de react-redux pour rendre le store accessible à tous les composants de votre application. Modifiez votre fichier index.js.

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import store from './store';

import App from './App';

ReactDOM.render(

  <Provider store={store}>

    {' '}

    <App />{' '}

  </Provider>,

  document.getElementById('root')

);

5. Connecter les Composants au Store

Utilisez le hook useSelector pour accéder à l'état et useDispatch pour envoyer des actions. Modifiez ou créez un composant Counter.js.

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {

  const count = useSelector(state => state.counter.value);

  const dispatch = useDispatch();

  return (

    <div>

      {' '}

      <h1>Compteur: {count}</h1>{' '}

      <button onClick={() => dispatch(increment())}>Incrémenter</button>{' '}

      <button onClick={() => dispatch(decrement())}>Décrémenter</button>{' '}

      <button onClick={() => dispatch(incrementByAmount(5))}>

        Incrémenter de 5

      </button>{' '}

    </div>

  );

};

export default Counter;

6. Utiliser le Composant dans l'Application

Assurez-vous d'utiliser le composant Counter dans votre application. Modifiez votre App.js.