Création d'un magasin global de type Redux à l'aide de hooks React

Bonjour, Habr! Je vous présente la traduction de l'article "Construire un magasin global de type Redux à l'aide de React Hooks" de Ramsay.

Imaginons que j'ai écrit une introduction intéressante à cet article, et maintenant nous pouvons aller directement aux choses vraiment intéressantes. Bref, nous allons
utilisez useReducer et useContext pour créer un hook React personnalisé qui donne accès à un référentiel global similaire à Redux.

Je ne suppose en aucune façon que cette solution est l'équivalent complet de Redux, car je suis sûr qu'elle ne l'est pas. En disant "Redux-like", je veux dire,
que vous mettrez à jour le référentiel à l'aide de la répartition et des actions , qui muteront l'état du référentiel et retourneront une nouvelle copie de l'état muté.
Si vous n'avez jamais utilisé Redux, faites semblant de ne pas lire ce paragraphe.

Crochets

Commençons par créer un contexte ( ci-après Context ) qui contiendra notre état ( ci-après état ) et une fonction de répartition ( ci-après répartition ). Nous allons également créer la fonction useStore , qui se comportera comme notre hook.

// store/useStore.js import React, { createContext, useReducer, useContext } from "react"; //     const initialState = {} const StoreContext = createContext(initialState); // useStore    React       export const useStore = store => { const { state, dispatch } = useContext(StoreContext); return { state, dispatch }; }; 

Puisque tout est stocké dans le contexte React , vous devez créer un fournisseur qui vous donnera
nous un objet d' état et une fonction de répartition . Le fournisseur est l'endroit où nous utilisons useReducer .

 // store/useStore.js ... const StoreContext = createContext(initialState); export const StoreProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <StoreContext.Provider value={{ state, dispatch }}> {children} </StoreContext.Provider> ); }; ... 

Nous utilisons useReducer pour obtenir l' état et l' expédition . En fait, c'est exactement ce que fait useReducer . Ensuite, nous passons l' état et l' expédions au fournisseur .
Nous pouvons maintenant envelopper n'importe quel composant React en utilisant <Provider /> et ce composant peut utiliser useStore pour interagir avec le référentiel.

Nous n'avons pas encore créé de réducteur . Ce sera notre prochaine étape.

 // store/useStore.js ... const StoreContext = createContext(initialState); //    actions,     state const Actions = {}; // reducer   ,  action    dispatch // action.type -  ,     Actions //   update   state      const reducer = (state, action) => { const act = Actions[action.type]; const update = act(state); return { ...state, ...update }; }; ... 

Je suis un grand fan de la séparation des actions et de l' état en groupes logiques, par exemple: vous devrez peut-être surveiller l'état du compteur (un exemple classique de la mise en œuvre du compteur) ou l'état de l'utilisateur (que l'utilisateur se soit connecté au système ou ses préférences personnelles).
Dans certains composants, vous devrez peut-être accéder à ces deux états, donc l'idée de les stocker dans un référentiel global unique est parfaitement logique. Nous pouvons diviser nos actions en groupes logiques tels que userActions et countActions , ce qui facilite leur gestion.

Créons les fichiers countActions.js et userActions.js dans le dossier du magasin.

 // store/countActions.js export const countInitialState = { count: 0 }; export const countActions = { increment: state => ({ count: state.count + 1 }), decrement: state => ({ count: state.count - 1 }) }; 

 // store/userActions.js export const userInitialState = { user: { loggedIn: false } }; export const userActions = { login: state => { return { user: { loggedIn: true } }; }, logout: state => { return { user: { loggedIn: false } }; } }; 

Dans ces deux fichiers, nous exportons initialState , car nous souhaitons les combiner ultérieurement dans le fichier useStore.js en un seul objet initialState .
Nous exportons également un objet Actions qui fournit des fonctions pour les mutations d'état. Notez que nous ne retournons pas un nouvel objet d'état, car nous voulons que cela se produise dans le réducteur , dans le fichier useStore.js .

Maintenant, nous importons le tout dans useStore.js pour obtenir l'image complète.

 // store/useStore.js import React, { createContext, useReducer, useContext } from "react"; import { countInitialState, countActions } from "./countActions"; import { userInitialState, userActions } from "./userActions"; //    (initial states) const initialState = { ...countInitialState, ...userInitialState }; const StoreContext = createContext(initialState); //  actions const Actions = { ...userActions, ...countActions }; const reducer = (state, action) => { const act = Actions[action.type]; const update = act(state); return { ...state, ...update }; }; export const StoreProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <StoreContext.Provider value={{ state, dispatch }}> {children} </StoreContext.Provider> ); }; export const useStore = store => { const { state, dispatch } = useContext(StoreContext); return { state, dispatch }; }; 

Nous l'avons fait! Faites un cercle d'honneur, et à votre retour, nous verrons comment tout utiliser dans le composant.

Bienvenue à nouveau! J'espère que votre cercle était vraiment honorable. Jetons un coup d'œil à useStore en action.

Nous pouvons d'abord envelopper notre composant App dans <StoreProvider /> .

 // App.js import React from "react"; import ReactDOM from "react-dom"; import { StoreProvider } from "./store/useStore"; import App from "./App"; function Main() { return ( <StoreProvider> <App /> </StoreProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<Main />, rootElement); 

Nous encapsulons l' application dans StoreProvider pour que le composant enfant ait accès à la valeur du fournisseur. Cette valeur est à la fois état et expédition .

Supposons maintenant que nous avons un composant AppHeader doté d'un bouton de connexion / déconnexion.

 // AppHeader.jsx import React, {useCallback} from "react"; import { useStore } from "./store/useStore"; const AppHeader = props => { const { state, dispatch } = useStore(); const login = useCallback(() => dispatch({ type: "login" }), [dispatch]); const logout = useCallback(() => dispatch({ type: "logout" }), [dispatch]); const handleClick = () => { loggedIn ? logout() : login(); } return ( <div> <button onClick={handleClick}> {loggedIn ? "Logout" : "Login"}</button> <span>{state.user.loggedIn ? "logged in" : "logged out"}</span> <span>Counter: {state.count}</span> </div> ); }; export default AppHeader; 

Lien vers Code Sandbox avec une implémentation complète

Auteur original: Ramsay
Lien vers l'original