Comment utiliser React Redux - Plus facile que de manger un bretzel

Voyons rapidement comment nous pouvons utiliser Redux dans une application React. L'utilisation de Redux est un peu différente de l'utilisation de vanilla Redux directement dans une application JS. Pour que Redux fonctionne avec React, nous devons ajouter certaines bibliothèques qui fonctionneront comme un adaptateur entre la vanille Redux Library et React. Nous pouvons également tirer parti de React Hooks pour utiliser ou faire muter le contexte stocké dans Redux

La nouvelle version de Redux nous fournit une bibliothèque Toolkit qui est très puissante et permet de créer des Slices . Nous pouvons utiliser Redux avec React en utilisant 3 bibliothèques :

redux | réagir-redux | @reduxjs/boîte à outils

Écrivons un code de base pour utiliser Redux avec React UI Application

Étape 1 : La première étape consiste à créer des tranches. Chaque tranche comprend un nom, un objet de contexte initial pour le magasin et des fonctions de réduction pour manipuler le magasin.

Créons la tranche dans un fichier appelé counterSlice.js

// We will use toolkit to create Slice
import {createSlice} from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: {count:0}
  reducers:{
    increment: state => { state.count += 1; } //looks like store is mutable
    decrement: state => { state.count -= 1; } //actually its not!! see below
    incrementBy: (state,action) => { state.count += action.payload; }
    decrementBy: (state,action) => { state.count -= action.payload; }
  }
});

export default counterSlice;

// We will use toolkit to configure Store
import {configureStore} from "@reduxjs/toolkit";
import counterSlice from "./counterSlice";

const store = configureStore({
  reducer: {
            counter: counterSlice.reducers
            }
});

export default store;

// We will use "react-redux" to use <Provider> tag
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store} >
    <App />
  </Provider>
);

// We will use "react" for useSelector and useDispatch Hooks!
import {useSelector, useDispatch} from "react";
import counterSlice from "./counterSlice.js";

const App = () => {
  const count = useSelector(state => { state.counter.count }); //subscribe!
  const dispatch = useDispatch();
  const {increment,decrement,increamentBy} = CounterSlice.reducers;
  
  return (
          <div>
            <h1>Counter: {counter} </h1>
            <button onClick={() => dispatch(increment()) }>INC</button>
            <button onClick={() => dispatch(decrement()) }>DEC</button>
            <button onClick={() => dispatch(incrementBy()) }>INC_BY</button>
            <button onClick={() => dispatch(decrementBy()) }>DEC_BY</button>
          </div>
         );
}

Peu de choses de plus!

À l'étape 1, nous voyons que nous accédons à l'état actuel de notre état et le mutant, state => { state.count += 1; } mais derrière la scène, ce code sera converti en un code intermédiaire qui manipulera l'état de manière immuable. AFAIK, la boîte à outils le fait dans les coulisses.

En outre, les extraits de code montrent comment créer une seule tranche et l'ajouter au magasin. Nous pouvons créer plusieurs tranches et les fournir au niveau supérieur de l'arborescence des composants et récupérer uniquement la tranche nécessaire du magasin. Essayez d'en créer plusieurs et d'y accéder via les composants. Ça devrait être faisable.

De plus, nous savons que le magasin n'est pas directement modifiable et devrait l'être en utilisant des réducteurs qui garantiront qu'une mise à jour est effectuée au dernier état du magasin et est effectuée plus efficacement par la bibliothèque Redux. Après tout, le magasin Redux est la seule source de vérité. Nous devons le protéger.

Et Redux fournit un magasin unique à l'application. lors de l'utilisation de React Hooks, nous pouvons avoir plusieurs Context Objs et Providers utilisant useContext . Mais maintenant, Redux fournit le concept de tranches… qui le rend plus puissant

C'est tout les gens. faites-moi savoir si besoin d'une correction. merci!