Utiliser Redux Toolkit avec React : un guide simple

Redux Toolkit est la méthode officielle et recommandée pour écrire la logique Redux. Il fournit de bonnes valeurs par défaut pour la configuration du magasin prête à l'emploi et inclut les modules complémentaires Redux les plus couramment utilisés. Dans ce blog, nous passerons en revue les bases de l'intégration de Redux Toolkit à une application React.

Qu’est-ce que la boîte à outils Redux ?

Redux Toolkit est un ensemble d'outils qui permettent de simplifier le processus d'écriture de la logique Redux. Il comprend des utilitaires pour simplifier les cas d'utilisation courants tels que la configuration du magasin, la création de réducteurs et l'écriture d'une logique de mise à jour immuable.

---

Configuration de la boîte à outils Redux avec React

Passons en revue les étapes pour configurer Redux Toolkit dans une application React.

Étape 1 : Installer les dépendances

Tout d’abord, vous devez installer les packages nécessaires. Vous pouvez le faire en utilisant npm ou fil.

npm install @reduxjs/toolkit react-redux

Étape 2 : Créer un magasin Redux

Le magasin est l'objet qui donne vie à Redux. Avec Redux Toolkit, vous pouvez créer une boutique à l'aide de la fonction configureStore.

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

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

export default store;

Étape 3 : Créer une tranche

Une tranche est un ensemble de logiques et d'actions de réduction Redux pour une seule fonctionnalité de votre application. La fonction createSlice de Redux Toolkit génère automatiquement des créateurs d'actions et des types d'actions.

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

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

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

export default counterSlice.reducer;

Étape 4 : Fournissez le magasin à votre application React

Pour rendre le magasin Redux disponible pour vos composants React, vous devez utiliser le composant Provider de React-redux.

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

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

Étape 5 : connecter les composants React au Redux Store

Pour connecter un composant React au magasin Redux, vous pouvez utiliser les hooks useSelector et useDispatch de React-redux.

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function 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>
    </div>
  );
}

export default Counter;

Étape 6 : utilisez le composant connecté dans votre application

Enfin, vous pouvez utiliser le composant connecté dans votre application.

// src/App.js
import Counter from './components/Counter';

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

export default App;

---

Conclusion

En suivant ces étapes, vous pouvez configurer Redux Toolkit dans votre application React pour gérer l'état de manière prévisible et maintenable. Redux Toolkit simplifie de nombreuses tâches courantes lorsque vous travaillez avec Redux, facilitant ainsi l'écriture et la maintenance de votre logique Redux.

---

Exploration plus approfondie

Pour ceux qui souhaitent approfondir Redux Toolkit et React, voici quelques ressources précieuses :

• Documentation Redux Toolkit : la documentation officielle fournit des guides complets et des références API.
  • Documentation de la boîte à outils Redux
• Documentation React Redux : découvrez comment utiliser Redux avec React.
  • Documentation React Redux
• Tutoriel Redux Essentials : Un didacticiel étape par étape pour vous aider à être opérationnel avec Redux Toolkit.
  • Tutoriel Redux Essentials
• Tutoriel sur les principes fondamentaux de Redux : Un didacticiel détaillé couvrant les concepts de base de Redux.
  • Tutoriel sur les principes fondamentaux de Redux

Merci d'avoir lu !
Po.

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!