Boîte à outils Redux complète (partie 1)

Objectif de la boîte à outils Redux

Nous savons déjà que Redux est une puissante bibliothèque de gestion d'état pour nos applications JavaScript, en particulier lorsque nous travaillons avec React.
Mais travailler avec Redux est difficile en raison de son code lourd pour la configuration de Redux. Ce qui rend difficile la maintenance et le débogage. C'est là que Redux Toolkit vient vous aider.
La boîte à outils Redux résout les problèmes

• La création d'une boutique est trop compliquée.
• Ajout de nombreux packages pour fonctionner avec Redux, par exemple Middleware, outils.
• Redux a besoin de trop de code pour être configuré

La boîte à outils Redux est le moyen officiel et recommandé d'écrire une logique redux. Elle fournit un ensemble d'outils pour simplifier le développement, réduire le code standard, ce qui contribue à rendre l'application évolutive et maintenable.

Principaux avantages de Redux Toolkit :

1. Moins de code passe-partout : supprimez le besoin de créateurs d'action et de constantes.
2. Configuration simplifiée de la boutique : fournit une API unique pour configurer la boutique avec des paramètres par défaut raisonnables.
3. Prise en charge intégrée de l'immuabilité et des DevTools : active automatiquement Redux DevTools et s'intègre à Immer pour l'immuabilité.
4. Meilleure prise en charge de TypeScript : fournit de meilleures saisies et s'intègre bien à TypeScript.

Nous pouvons utiliser la boîte à outils Redux avec n'importe quelle bibliothèque Javascript, nous configurons donc la boîte à outils Redux avec React.

Configuration de Redux Toolkit dans une application React

Étape 1 : Créer un nouveau projet React

Tout d'abord, créons une nouvelle application React. Vous pouvez utiliser create-react-app ou Vite à cet effet. Nous utiliserons ici create-react-app pour plus de simplicité.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

Étape 2 : Installer Redux Toolkit et React-Redux

Ensuite, installez les packages nécessaires : @reduxjs/toolkit et réagissez-redux.

npm install @reduxjs/toolkit react-redux

1. Comprendre les tranches et les réducteurs

Une tranche est un ensemble de logiques et d'actions de réduction Redux pour une fonctionnalité spécifique de votre application. Redux Toolkit fournit la fonction createSlice pour aider à créer une tranche d'état avec un minimum de passe-partout.

Étape 1 : Créer une tranche
Créons une simple contre-tranche. Créez un nouveau fichier nommé counterSlice.js dans un répertoire feature/counter :

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

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

Ici, nous définissons une tranche nommée compteur avec un état initial et trois réducteurs (incrément, décrément et incrémentByAmount). La fonction createSlice génère automatiquement des créateurs d'actions pour chaque fonction de réduction.

1. Configuration du Redux Store

Maintenant que nous avons notre tranche, configurons la boutique Redux. Redux Toolkit fournit une fonction configureStore qui configure le magasin avec de bonnes valeurs par défaut.

Étape 1 : Créer une boutique
Créez un fichier store.js dans un répertoire d'application :

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

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

export default store;

Étape 2 : Fournissez le Store à votre application
Enveloppez votre application React dans un composant de React-redux et transmettez-le au magasin. Mettez à jour le fichier index.js :

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

1. Connexion des composants au magasin

Pour interagir avec le magasin Redux, utilisez les hooks useSelector et useDispatch fournis par réagir-redux.
Étape 1 : accéder à l'état avec useSelector
Utilisez le hook useSelector pour accéder à l'état depuis le magasin

// src/features/counter/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>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

Étape 2 : utilisez le composant Counter dans votre application
Importez et utilisez le composant Counter dans votre composant principal d'application :

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

1. Conclusion et prochaines étapes

Dans cette partie, nous avons couvert les bases de la configuration de Redux Toolkit dans une application React, notamment la création de tranches, la configuration du magasin et la connexion de composants au magasin Redux à l'aide de hooks. Dans la partie suivante, nous approfondirons la gestion de la logique asynchrone avec createAsyncThunk pour récupérer les données des API et gérer différents états de chargement.

Restez à l'écoute pour la partie 2 : Advanced Redux Toolkit - Async Logic avec createAsyncThunk !

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!