शुभ दिन, खाबरोवस्क!

मैं इस बारे में बात करना चाहता हूं कि मैंने हाल ही में रिएक्ट में कुछ "हुक" के बारे में कैसे सीखा। वे अपेक्षाकृत हाल ही में दिखाई दिए, 6 फरवरी, 2019 के संस्करण [16.8.0] में (जो कि फ्रंटएंड के विकास की गति के अनुसार, बहुत समय पहले हुआ है)

दस्तावेज़ीकरण पढ़ने के बाद , मैंने उपयोगरेडर हुक पर ध्यान केंद्रित किया और तुरंत खुद से सवाल पूछा: "यह बात पूरी तरह से Redux को बदल सकती है?" मैंने प्रयोगों पर कई शामें बिताईं और अब मैं परिणामों और अपने निष्कर्षों को साझा करना चाहता हूं।

क्या मुझे उपयोग के साथ Redux को बदलने की आवश्यकता है?

अधीर के लिए - तुरंत निष्कर्ष

पेशेवरों:

• आप छोटे अनुप्रयोगों में (जहां बड़े संयुक्त Reducers की कोई आवश्यकता नहीं है) Redux के बजाय हुक (useContext + useReducer) का उपयोग कर सकते हैं। इस मामले में, Redux वास्तव में निरर्थक हो सकता है।

विपक्ष:

• कोड की एक बड़ी मात्रा पहले से ही प्रतिक्रिया + Redux के एक समूह पर लिखी गई है और हुक के लिए इसे फिर से लिखना (उपयोगकंटेक्स्ट + उपयोगरेड्यूडर) मुझे अनुपयुक्त लगता है, कम से कम अभी के लिए।
• Redux एक सिद्ध पुस्तकालय है, हुक एक नवाचार है, भविष्य में उनके इंटरफेस और व्यवहार बदल सकते हैं।
• उपयोग का उपयोग करने के लिए कॉन्टेक्स्ट + उपयोगरेड्यूसर वास्तव में सुविधाजनक है, आपको कुछ बाइक लिखना होगा।

निष्कर्ष लेखक के व्यक्तिगत विचार हैं और बिना शर्त सच होने का दावा नहीं करते हैं - यदि आप सहमत नहीं हैं, तो मुझे टिप्पणियों में आपकी रचनात्मक आलोचना देखकर खुशी होगी।

आइए इसे जानने की कोशिश करें

एक सरल उदाहरण से शुरू करते हैं।

(Reducer.js)

import React from "react"; export const ContextApp = React.createContext(); export const initialState = { app: { test: 'test_context' } }; export const testReducer = (state, action) => { switch(action.type) { case 'test_update': return { ...state, ...action.payload }; default: return state } }; 

अब तक, हमारे reducer बिल्कुल Redux की तरह ही दिखता है

(App.js)

 import React, {useReducer} from 'react' import {ContextApp, initialState, testReducer} from "./reducer.js"; import {IndexComponent} from "./IndexComponent.js" export const App = () => { //  reducer   state + dispatch   const [state, dispatch] = useReducer(testReducer, initialState); return ( //  ,     reducer   //  ContextApp   (dispatch  state) //      <ContextApp.Provider value={{dispatch, state}}> <IndexComponent/> </ContextApp.Provider> ) }; 

(IndexComponent.js)

 import React, {useContext} from "react"; import {ContextApp} from "./reducer.js"; export function IndexComponent() { //   useContext    ContextApp //  IndexComponent      ContextApp.Provider const {state, dispatch} = useContext(ContextApp); return ( //  dispatch    reducer.js   testReducer //    .    Redux <div onClick={() => {dispatch({ type: 'test_update', payload: { newVar: 123 } })}}> {JSON.stringify(state)} </div> ) } 

यह सबसे सरल उदाहरण है जिसमें हम बस अद्यतन एक फ्लैट (घोंसले के शिकार) reducer के लिए नया डेटा लिखें
सिद्धांत रूप में, आप इस तरह से लिखने का प्रयास कर सकते हैं:

(Reducer.js)

 ... export const testReducer = (state, data) => { return { ...state, ...data } ... 

(IndexComponent.js)

 ... return ( //      ,   type <div onClick={() => {dispatch({ newVar: 123 }> {JSON.stringify(state)} </div> ) ... 

यदि हमारे पास एक बड़ा और सरल आवेदन नहीं है (जो कि वास्तविकता में शायद ही कभी होता है), तो आप प्रकार का उपयोग नहीं कर सकते हैं और हमेशा एक्शन से सीधे reducer अपडेट प्रबंधित कर सकते हैं। वैसे, अपडेट की कीमत पर, इस मामले में हमने केवल reducer में नया डेटा लिखा है, लेकिन क्या होगा अगर हमें एक पेड़ में एक मूल्य को कई स्तरों के घोंसले के शिकार के साथ बदलना होगा?

अब और अधिक जटिल

आइए निम्नलिखित उदाहरण देखें:

(IndexComponent.js)

 ... return ( //        //     -     //      ,     callback: <div onClick={() => { //  ,    callback, //   testReducer     state (state) => { const {tree_1} = state; return { tree_1: { ...tree_1, tree_2_1: { ...tree_1.tree_2_1, tree_3_1: 'tree_3_1 UPDATE' }, }, }; }> {JSON.stringify(state)} </div> ) ... 

(Reducer.js)

 ... export const initialState = { tree_1: { tree_2_1: { tree_3_1: 'tree_3_1', tree_3_2: 'tree_3_2' }, tree_2_2: { tree_3_3: 'tree_3_3', tree_3_4: 'tree_3_4' } } }; export const testReducer = (state, callback) => { //      state      //      callback const action = callback(state); return { ...state, ...action } ... 

ठीक है, हमने पेड़ के अद्यतन का भी पता लगाया। हालांकि इस मामले में पहले से ही बेहतर है कि टेस्टरेडर के अंदर के प्रकारों का उपयोग करके वापस लौटें और एक निश्चित प्रकार की कार्रवाई के अनुसार पेड़ को अपडेट करें। सब कुछ Redux की तरह है, केवल परिणामस्वरूप बंडल थोड़ा छोटा है [8]।

अतुल्यकालिक संचालन और प्रेषण

लेकिन क्या सब ठीक है? यदि हम अतुल्यकालिक संचालन का उपयोग करने के लिए जाते हैं तो क्या होगा?
ऐसा करने के लिए, हमें अपने स्वयं के प्रेषण को परिभाषित करना होगा। चलो कोशिश करो!

(Action.js)

 export const actions = { sendToServer: function ({dataForServer}) { //      ,   dispatch return function (dispatch) { //   dispatch    , //   state      dispatch(state => { return { pending: true } }); } } 

(IndexComponent.js)

 const [state, _dispatch] = useReducer(AppReducer, AppInitialState); //     dispatch   -> //    ,  Proxy const dispatch = (action) => action(_dispatch); ... dispatch(actions.sendToServer({dataForServer: 'data'})) ... 

सब कुछ ठीक भी लग रहा है, लेकिन अब हमारे पास बहुत सारे नेस्टेड कॉलबैक हैं , जो बहुत अच्छा नहीं है, अगर हम सिर्फ एक्शन फंक्शन बनाए बिना राज्य बदलना चाहते हैं, तो हमें इस तरह का एक निर्माण लिखना होगा:

(IndexComponent.js)

 ... dispatch( (dispatch) => dispatch(state => { return { {dataForServer: 'data'} } }) ) ... 

यह कुछ डरावना है, है ना? एक साधारण डेटा अपडेट के लिए, मैं वास्तव में ऐसा कुछ लिखना चाहूंगा:

(IndexComponent.js)

 ... dispatch({dataForServer: 'data'}) ... 

ऐसा करने के लिए, आपको प्रेषण फ़ंक्शन के लिए प्रॉक्सी को बदलना होगा जो हमने पहले बनाया था
(IndexComponent.js)

 const [state, _dispatch] = useReducer(AppReducer, AppInitialState); //  // const dispatch = (action) => action(_dispatch); //  const dispatch = (action) => { if (typeof action === "function") { action(_dispatch); } else { _dispatch(() => action) } }; ... 

अब हम एक एक्शन फंक्शन और प्रेषण के लिए एक साधारण वस्तु दोनों को पास कर सकते हैं।
लेकिन! ऑब्जेक्ट के सरल स्थानांतरण के साथ, आपको सावधान रहना चाहिए, आपको ऐसा करने के लिए लुभाया जा सकता है:

(IndexComponent.js)

 ... dispatch({ tree: { //  state         AppContext ...state.tree, data: 'newData' } }) ... 

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

इस कारण से, ऐसी विधि शायद ही सार्थक हो जाती है, केवल फ्लैट रीड्यूसर को अपडेट करने के लिए जिसमें कोई नेस्टिंग नहीं है और आपको नेस्टेड ऑब्जेक्ट्स को अपडेट करने के लिए राज्य से संपर्क करने की आवश्यकता नहीं है। वास्तव में, reducers शायद ही कभी पूरी तरह से सपाट होते हैं, इसलिए मैं आपको सलाह दूंगा कि आप इस विधि का उपयोग बिल्कुल न करें और केवल क्रियाओं के माध्यम से डेटा अपडेट करें।

(Action.js)

 ... // ..  dispatch   callback,    //       (. reducer.js) dispatch(state => { return { dataFromServer: { ...state.dataFromServer, form_isPending: true } } }); axios({ method: 'post', url: `...`, data: {...} }).then(response => { dispatch(state => { //   axios     //         dispatch //     ,  state -    , // ..       testReducer (reducer.js) return { dataFromServer: { ...state.dataFromServer, form_isPending: false, form_request: response.data }, user: {} } }); }).catch(error => { dispatch(state => { // , state -    ) return { dataFromServer: { ...state.dataFromServer, form_isPending: false, form_request: { error: error.response.data } }, } }); ... 

निष्कर्ष:

• यह एक दिलचस्प अनुभव था, मैंने अपने शैक्षणिक ज्ञान को मजबूत किया और प्रतिक्रिया की नई विशेषताओं को सीखा
• मैं उत्पादन में इस दृष्टिकोण का उपयोग नहीं करूंगा (कम से कम अगले छह महीनों में)। ऊपर वर्णित कारणों के लिए (यह एक नई विशेषता है, और Redux एक सिद्ध और विश्वसनीय उपकरण है) + मुझे मिलीसेकंड के बाद पीछा करने के लिए कोई प्रदर्शन समस्या नहीं है जिसे आप संपादक को छोड़ कर जीत सकते हैं [8]

मुझे यह जानकर ख़ुशी होगी, टिप्पणियों में, हमारे हैबरोबस्तचेवा के सामने के भाग के सहयोगियों की राय!

संदर्भ:

• प्रतिक्रिया हुक और संदर्भ के साथ Redux को बदलना (भाग 1)
• देशी React.useReducer हुक का उपयोग कब करें और यह Redux से कैसे अलग है
• आपको शायद Redux की जरूरत नहीं है (लेकिन आप इसे हुक से बदल नहीं सकते)
• रिएक्ट का उपयोगरेडर बनाम रेडक्स
• जब संदर्भ Redux की जगह लेता है
• Redux अंतर्निहित रिएक्ट संदर्भ और हुक के साथ वैकल्पिक
• क्या रिएक्ट से बदलेगा हुक?
• [Esp] https://bespoyasov.ru/blog/you-really-dont-need-redux-now/