रिएक्ट हुक्स की तरह एक Redux की तरह ग्लोबल स्टोर बनाना

नमस्कार, हेब्र! मैं आपके लिए रामसे द्वारा दिए गए लेख "बिल्ड अ रेड्यूक्स-लाइक ग्लोबल स्टोर यूज़िंग रेक्ट हुक्स" का अनुवाद प्रस्तुत करता हूं।

आइए कल्पना करें कि मैंने इस लेख में एक दिलचस्प परिचय लिखा है, और अब हम वास्तव में दिलचस्प चीजों पर सीधे जा सकते हैं। संक्षेप में, हम करेंगे
एक कस्टम रिएक्ट हुक बनाने के लिए उपयोगरेडर और उपयोगकंटेक्स का उपयोग करें जो Redux के समान एक वैश्विक भंडार तक पहुंच प्रदान करता है।

मैं किसी भी तरह से यह नहीं मानता कि यह समाधान Redux के पूर्ण समकक्ष है, क्योंकि मुझे यकीन है कि यह नहीं है। "Redux-like," कहने से मेरा मतलब है,
आप प्रेषण और कार्यों का उपयोग करके रिपॉजिटरी को अपडेट करेंगे, जो रिपॉजिटरी की स्थिति को म्यूट करेगा और उत्परिवर्तित राज्य की एक नई प्रति लौटाएगा।
यदि आपने Redux का उपयोग कभी नहीं किया है, तो इस पैराग्राफ को न पढ़ने का दिखावा करें।

hooky

आइए एक संदर्भ ( इसके बाद प्रसंग ) बनाकर शुरू करें जिसमें हमारा राज्य ( इसके बाद का राज्य ) और एक प्रेषण समारोह ( इसके बाद प्रेषण ) होगा। हम यूज़स्टोर फ़ंक्शन भी बनाएंगे, जो हमारे हुक की तरह व्यवहार करेगा।

// 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 }; }; 

चूँकि सबकुछ React Context के अंदर जमा होता है, इसलिए आपको एक प्रदाता बनाना होगा जो देगा
हमें एक राज्य वस्तु और एक प्रेषण समारोह। प्रदाता वह है जहाँ हम उपयोग करते हैंरेडर ।

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

हम स्टेट और डिस्पैच प्राप्त करने के लिए उपयोगरेडर का उपयोग करते हैं वास्तव में, यह वही है जो useReducer करता है। इसके बाद, हम राज्य को पास करते हैं और प्रदाता को भेजते हैं ।
अब हम किसी भी रिएक्ट कंपोनेंट को <प्रदाता /> का उपयोग करके लपेट सकते हैं और यह घटक रिपॉजिटरी के साथ बातचीत करने के लिए यूज़स्टोर का उपयोग कर सकता है।

हमने अभी तक reducer नहीं बनाया है । यह हमारा अगला कदम होगा।

 // 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 }; }; ... 

मैं क्रियाओं और राज्य को तार्किक समूहों में अलग करने का बहुत बड़ा प्रशंसक हूं, उदाहरण के लिए: आपको काउंटर की स्थिति (काउंटर के कार्यान्वयन का एक उत्कृष्ट उदाहरण) या उपयोगकर्ता की स्थिति (चाहे उपयोगकर्ता ने सिस्टम या अपनी व्यक्तिगत प्राथमिकताओं में लॉग इन किया हो) की निगरानी करने की आवश्यकता हो सकती है।
कुछ घटक में, आपको इन दोनों राज्यों तक पहुंच की आवश्यकता हो सकती है, इसलिए उन्हें एक ही वैश्विक भंडार में संग्रहीत करने का विचार एकदम सही है। हम अपने कार्यों को तार्किक समूहों में विभाजित कर सकते हैं जैसे userActions और countActions , जो उन्हें बहुत आसान बनाता है।

चलो स्टोर फ़ोल्डर में countActions.js और userActions.js फाइलें बनाते हैं।

 // 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 } }; } }; 

इन दोनों फ़ाइलों में, हम initialState निर्यात करते हैं , क्योंकि हम बाद में उन्हें एक ही initialState ऑब्जेक्ट में useStore.js फ़ाइल में संयोजित करना चाहते हैं।
हम एक एक्शन ऑब्जेक्ट भी निर्यात करते हैं जो राज्य के म्यूटेशन के लिए कार्य प्रदान करता है। ध्यान दें कि हम एक नया राज्य ऑब्जेक्ट वापस नहीं कर रहे हैं, क्योंकि हम चाहते हैं कि यह reducer में, useStore.js फ़ाइल में हो।

अब हम पूरी तस्वीर पाने के लिए इसे सभी useStore.js में आयात करते हैं।

 // 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 }; }; 

हमने कर दिखाया! सम्मान का एक चक्र बनाएं, और जब आप वापस लौटेंगे, तो हम देखेंगे कि घटक में इसका उपयोग कैसे किया जाए।

वापस स्वागत है! मुझे उम्मीद है कि आपका सर्कल वास्तव में सम्मानजनक था। आइए एक्शनस्टोर में एक नज़र डालते हैं ।

पहले हम अपने App घटक को <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); 

हम स्टोरप्रॉइडर में ऐप को लपेटते हैं ताकि प्रदाता से मूल्य तक बच्चे के घटक की पहुंच हो। यह मान राज्य और प्रेषण दोनों है।

अब, मान लेते हैं कि हमारे पास एक AppHeader घटक है जिसमें एक लॉगिन / लॉगआउट बटन है।

 // 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; 

पूर्ण कार्यान्वयन के साथ कोड सैंडबॉक्स से लिंक करें

मूल लेखक: रामसे
मूल से लिंक करें