SOLID द्वारा रिडक्स लिखना

इस पोस्ट में हम लेखन कार्यों और reducer पर स्पर्श करेंगे। शुरू करने के लिए, एक विशिष्ट 'प्रवाह' पर विचार करें, जिसमें हम निम्नलिखित कार्य करते हैं (आगे, हम सब कुछ फिर से काम करते हैं ताकि हमारा कोड SOLID सिद्धांतों से मिलता हो)।

1. स्थिरांक के साथ एक फ़ाइल बनाएं (यहां हम कार्रवाई प्रकारों के नाम सहेजते हैं)

export const REQUEST_DATA_PENDING = "REQUEST_DATA_PENDING"; export const REQUEST_DATA_SUCCESS = "REQUEST_DATA_SUCCESS"; export const REQUEST_DATA_FAILED = "REQUEST_DATA_FAILED"; export const PROFILES_PER_PAGE = "PROFILES_PER_PAGE"; export const CURRENT_PAGE = "CURRENT_PAGE"; 

2. एक फ़ाइल बनाएं जहां हम कार्यों का वर्णन करते हैं (यहां हम उपयोगकर्ता खातों, और पृष्ठांकन के लिए अनुरोध करते हैं)। इसके अलावा उदाहरण में redux-thunk का उपयोग किया गया था (आगे हम इसी तरह की निर्भरता से इनकार करेंगे):

 export const requestBigDataAction = () => (dispatch) => { fetchingData(dispatch, BIG_DATA_URL, 50); } export const changeCurrentPAGE = (page) => ({ type: CURRENT_PAGE, payload: page }) function fetchingData(dispatch, url, profilesPerPage) { dispatch({type: REQUEST_DATA_PENDING}); fetch(url) .then((res) => { if(res.status !== 200) { throw new Error (res.status); } else { return res.json(); } }) .then((data) => {dispatch({type: REQUEST_DATA_SUCCESS, payload: data})}) .then(() => dispatch({type: PROFILES_PER_PAGE, payload: profilesPerPage})) .catch((err) => dispatch({type: REQUEST_DATA_FAILED, payload: ` . ${err.message}`})); } 

3. हम reducer लिखते हैं

 import { REQUEST_DATA_PENDING, REQUEST_DATA_SUCCESS, REQUEST_DATA_FAILED, PROFILES_PER_PAGE, CURRENT_PAGE } from '../constants/constants'; const initialState = { isPending: false, buffer: [], data: [], error: "", page: 0, profilesPerPage: 0, detailedProfile: {} } export const MainReducer = (state = initialState, action = {}) => { switch(action.type) { case REQUEST_DATA_PENDING: return Object.assign({}, state, {isPending: true}); case REQUEST_DATA_SUCCESS: return Object.assign({}, state, {page : 0, isPending: false, data: action.payload, error: "", detailedProfile: {}, buffer: action.payload}); case REQUEST_DATA_FAILED: return Object.assign({}, initialState, {error: action.payload}); case PROFILES_PER_PAGE: return Object.assign({}, state, {profilesPerPage: action.payload}); case CURRENT_PAGE: return Object.assign({}, state, {page: action.payload}); default: return state; } } 

4. स्टोर कॉन्फ़िगर करें (मिडलवेयर thunkMiddleware का उपयोग करें)

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import {createStore, applyMiddleware} from 'redux'; import {Provider} from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import {MainReducer} from './reducers/mainReducer'; const store = createStore(MainReducer, applyMiddleware(thunkMiddleware)); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root')); 

5. घटक को रिड्यूक्स से कनेक्ट करें

 const mapDispatchToProps = (dispatch)=>{ return { onRequestBigData: (event) =>{ dispatch(requestBigDataAction()); } } }; 

पेजेशन बटन को Redux से कनेक्ट करें

 const mapDispatchToProps = (dispatch)=>{ return { onChangePage: (page) =>{ dispatch(changeCurrentPAGE(page)); } } }; 

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

समाधान: बहुरूपता हमारी मदद करेगा। प्रत्येक क्रिया को निष्पादन विधि में जोड़ें, जो अपडेट को लागू करेगा और अपडेट की गई स्थिति को वापस करेगा। तब हमारे reducer फार्म ले जाएगा

 export const MainReducer = (state = initialState, action) => { if(typeof action.execute === 'function') return action.execute(state); return state; }; 

अब एक नई कार्रवाई जोड़ते समय, हमें reducer बदलने की आवश्यकता नहीं है, और यह एक विशाल राक्षस में नहीं बदलता है।

इसके बाद, Redux-thunk को छोड़ दें और क्रियाओं को फिर से लिखें

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import {createStore} from 'redux'; import {Provider} from 'react-redux'; // import thunkMiddleware from 'redux-thunk'; import {MainReducer} from './reducers/mainReducer'; const store = createStore(MainReducer); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root')); 

जुड़े घटक पर जाएं, जिसकी क्रिया अतुल्यकालिक है (इसे थोड़ा सही करना होगा)

 const mapDispatchToProps = (dispatch)=>{ return { onRequestBigData: (event) =>{ requestBigDataAction(dispatch); }, } }; 

और स्वयं क्रियाओं पर आगे बढ़ें और उन पर निष्पादन विधि जोड़ें

 const type = 'bla-bla'; const requestDataPending = {execute: state => ({...state, isPending: true}), type}; const requestDataSuccess = payload => ({ execute: function (state) { return ({...state, page : 0, isPending: false, data: payload, error: "", detailedProfile: {}, buffer: payload}) }, type}) const profilesPerPageAction = profilesPerPage => ({ execute: state => ({...state, profilesPerPage: profilesPerPage}), type }); const requestDataFailed = errMsg => state => ({...state, error: ` . ${errMsg}`}); function fetchingData(dispatch, url, profilesPerPage) { dispatch(requestDataPending); fetch(url) .then((res) => { if(res.status !== 200) { throw new Error (res.status); } else { return res.json(); } }) .then((data) => {dispatch(requestDataSuccess(data))}) .then(() => dispatch(profilesPerPageAction(profilesPerPage))) .catch((err) => dispatch(requestDataFailed(err.message))); } export const requestBigDataAction = (dispatch) => { fetchingData(dispatch, BIG_DATA_URL, 50); } export const changeCurrentPAGE = page => ({ type, execute: state => ({...state, page}) }) 

नोट: प्रकार की संपत्ति की आवश्यकता है (यदि आप इसे नहीं जोड़ते हैं, तो एक अपवाद फेंक दिया जाएगा)। लेकिन हमारे लिए यह बिल्कुल भी मायने नहीं रखता। यही कारण है कि अब हमें कार्यों के प्रकारों को सूचीबद्ध करने के लिए एक अलग फ़ाइल की आवश्यकता नहीं है।

पुनश्च: इस लेख में, हमने एसआरपी और ओसीपी, बहुरूपता के सिद्धांतों को लागू किया, तीसरे पक्ष के पुस्तकालय को त्याग दिया और हमारे कोड को अधिक स्वच्छ और बनाए रखा।