Redux-symbiote - लेखन क्रियाएं और लगभग कोई दर्द नहीं के साथ reducers

रिएक्ट-रिडक्स एक बेहतरीन चीज है। जब सही ढंग से उपयोग किया जाता है, तो एप्लिकेशन आर्किटेक्चर कुशल होता है और प्रोजेक्ट संरचना को पढ़ना आसान होता है। लेकिन किसी भी निर्णय के रूप में, कुछ ख़ासियतें हैं।

कार्यों और रिड्यूसर का विवरण ऐसी विशेषताओं में से एक है। कोड में इन दो संस्थाओं का क्लासिक कार्यान्वयन एक अधिक समय लेने वाला कार्य है।

क्लासिक कार्यान्वयन का दर्द

एक सरल उदाहरण:

// actionTypes.js //    export const POPUP_OPEN_START = 'POPUP_OPEN_START '; export const POPUP_OPEN_PENDING = 'POPUP_OPEN_PENDING '; export const POPUP_OPEN_SUCCESS = 'POPUP_OPEN_SUCCESS '; export const POPUP_OPEN_FAIL = 'POPUP_OPEN_FAIL'; export const POPUP_CLOSE_START = 'POPUP_CLOSE_START '; export const POPUP_CLOSE_PENDING = 'POPUP_CLOSE_PENDING '; export const POPUP_CLOSE_SUCCESS = 'POPUP_CLOSE_SUCCESS '; export const POPUP_CLOSE_FAIL = 'POPUP_CLOSE_FAIL'; 

 // actions.js //    import { POPUP_OPEN_START, POPUP_OPEN_PENDING, POPUP_OPEN_SUCCESS, POPUP_OPEN_FAIL, POPUP_CLOSE_START, POPUP_CLOSE_PENDING, POPUP_CLOSE_SUCCESS, POPUP_CLOSE_FAIL } from './actionTypes'; export function popupOpenStart(name) { return { type: POPUP_OPEN_START, payload: { name }, } } export function popupOpenPending(name) { return { type: POPUP_OPEN_PENDING, payload: { name }, } } export function popupOpenFail(error) { return { type: POPUP_OPEN_FAIL, payload: { error, }, } } export function popupOpenSuccess(name, data) { return { type: POPUP_OPEN_SUCCESS, payload: { name, data }, } } export function popupCloseStart(name) { return { type: POPUP_CLOSE_START, payload: { name }, } } export function popupClosePending(name) { return { type: POPUP_CLOSE_PENDING, payload: { name }, } } export function popupCloseFail(error) { return { type: POPUP_CLOSE_FAIL, payload: { error, }, } } export function popupCloseSuccess(name) { return { type: POPUP_CLOSE_SUCCESS, payload: { name }, } } 

 // reducers.js //   import { POPUP_OPEN_START, POPUP_OPEN_PENDING, POPUP_OPEN_SUCCESS, POPUP_OPEN_FAIL, POPUP_CLOSE_START, POPUP_CLOSE_PENDING, POPUP_CLOSE_SUCCESS, POPUP_CLOSE_FAIL } from './actionTypes'; const initialState = { opened: [] }; export function popupReducer(state = initialState, action) { switch (action.type) { case POPUP_OPEN_START: case POPUP_OPEN_PENDING: case POPUP_CLOSE_START: case POPUP_CLOSE_PENDING: return { ...state, error: null, loading: true }; case POPUP_OPEN_SUCCESS : return { ...state, loading: false, opened: [ ...(state.opened || []).filter(x => x.name !== action.payload.name), { ...action.payload } ] }; case POPUP_OPEN_FAIL: return { ...state, loading: false, error: action.payload.error }; case POPUP_CLOSE_SUCCESS: return { ...state, loading: false, opened: [ ...state.opened.filter(x => x.name !== name) ] }; case POPUP_CLOSE_FAIL: return { ...state, loading: false, error: action.payload.error }; } return state; } 

आउटपुट में 3 फाइलें हैं और कम से कम निम्नलिखित समस्याएं हैं:

• "ब्लोट" कोड को केवल क्रियाओं की एक नई श्रृंखला जोड़कर
• कार्रवाई स्थिरांक के अतिरिक्त आयात
• कार्रवाई लगातार नाम (व्यक्तिगत रूप से) पढ़ना

अनुकूलन

इस उदाहरण को redux-actions के साथ सुधार किया जा सकता है।

 import { createActions, handleActions, combineActions } from 'redux-actions' export const actions = createActions({ popups: { open: { start: () => ({ loading: true }), pending: () => ({ loading: true }), fail: (error) => ({ loading: false, error }), success: (name, data) => ({ loading: false, name, data }), }, close: { start: () => ({ loading: true }), pending: () => ({ loading: true }), fail: (error) => ({ loading: false, error }), success: (name) => ({ loading: false, name }), }, }, }).popups const initialState = { opened: [] }; export const accountsReducer = handleActions({ [ combineActions( actions.open.start, actions.open.pending, actions.open.success, actions.open.fail, actions.close.start, actions.close.pending, actions.close.success, actions.close.fail ) ]: (state, { payload: { loading } }) => ({ ...state, loading }), [combineActions(actions.open.fail, actions.close.fail)]: (state, { payload: { error } }) => ({ ...state, error }), [actions.open.success]: (state, { payload: { name, data } }) => ({ ...state, error: null, opened: [ ...(state.opened || []).filter(x => x.name !== name), { name, data } ] }), [actions.close.success]: (state, { payload: { name } }) => ({ ...state, error: null, opened: [ ...state.opened.filter(x => x.name !== name) ] }) }, initialState) 

पहले से ही बहुत बेहतर है, लेकिन पूर्णता की कोई सीमा नहीं है।

दर्द का इलाज करें

एक बेहतर समाधान की तलाश में, मैं LestaD habr.com/en/post/350850/#comment_10706454 द्वारा एक टिप्पणी के पार आया और Redux -symbiote का प्रयास करने का निर्णय लिया।
इसने अनावश्यक संस्थाओं को हटाने और कोड की मात्रा को कम करने की अनुमति दी।

ऊपर दिया गया उदाहरण इस तरह दिखने लगा:

 // symbiotes/popups.js import { createSymbiote } from 'redux-symbiote'; export const initState = { opened: [] }; export const { actions, reducer } = createSymbiote(initialState, { popups: { open: { start: state => ({ ...state, error: null }), pending: state => ({ ...state }), success: (state, { name, data } = {}) => ({ ...state, opened: [ ...(state.opened || []).filter(x => x.name !== name), { name, data }) ] }), fail: (state, { error } = {}) => ({ ...state, error }) }, close: { start: state => ({ ...state, error: null }), pending: state => ({ ...state }), success: (state, { name } = {}) => ({ ...state, opened: [ ...state.opened.filter(x => x.name !== name) ] }), fail: (state, { error } = {}) => ({ ...state, error }) } } }); 

 //   import { actions } from './symbiotes/popups'; // ... export default connect( mapStateToProps, dispatch => ({ onClick: () => { dispatch(actions.open.start({ name: PopupNames.Info })); } }) )(FooComponent); 

हमारे पास मौजूद पेशेवरों से:

• सभी एक फ़ाइल में
• कम कोड
• क्रियाओं का संरचित प्रतिनिधित्व

Minuses की:

• आईडीई हमेशा संकेत प्रदान नहीं करता है
• कोड में कार्रवाई के लिए देखने के लिए मुश्किल है
• कार्रवाई का नाम बदलना मुश्किल है

विपक्ष के बावजूद, यह मॉड्यूल हमारी परियोजनाओं में सफलतापूर्वक उपयोग किया जाता है।

अच्छे काम के लिए LestaD को धन्यवाद।