रेडक्स

Question

में एकाधिक रेड्यूसर में क्रियाओं का पुन: उपयोग करना, इसलिए मैं एक बड़े प्रतिक्रिया/रेडक्स ऐप पर काम कर रहा हूं और यह बहुत खुश हूं कि यह रेडक्स में राज्य का प्रबंधन कितना आसान है। हम चीज़ों को अपेक्षाकृत डोमेन आधारित रखने के लिए रेड्यूसर/एक्शन/एक्शन क्रिएटर के लिए "बतख" शैली दृष्टिकोण का उपयोग कर रहे हैं। इसके अलावा, हम डोमेन से जुड़े ui राज्य को रखने की कोशिश करते हैं और अधिकांश रेड्यूसर की समान संरचना होती है।

export default function home(state = initialState, action = {}) { 
    switch (action.type) { 
    case OPEN: 
     return { 
     ...state, 
     ui: { 
      ...state.ui, 
      [action.key]: true 
     } 
     }; 
    case CLOSE: 
     return { 
     ...state, 
     ui: { 
      ...state.ui, 
      [action.key]: false 
     } 
     }; 
    case SELECT_TAB: 
     return { 
     ...state, 
     ui: { 
      selectedTab: action.selected 
     } 
     }; 
    default: 
     return state; 
    } 
} 

हम अंत में एक ही कार्रवाई ui के लिए अधिक से अधिक दोहराया, मुख्य रूप से टॉगल और स्थापित करने के लिए क्या प्रदर्शित किया जाता है होने: यह इस तरह दिखता है। प्रत्येक रेड्यूसर में ui के लिए OPEN और CLOSE टाइप स्टेटमेंट में जोड़ने के बिना डोमेन आधारित ui को रेड्यूसर में रखने का कोई तरीका है। शायद मैं जो सोच रहा हूं वह रेडक्स में एक विरोधी पैटर्न है लेकिन यह देखने के लिए उत्सुक है कि क्या कोई इस तरह के मुद्दे में भाग गया है?

अद्यतन:

मैं नीचे सूचीबद्ध समाधान चाहते हैं, लेकिन तुम कैसे कम करने सबसे छुटकारा पाना चाहती भीतर एक ui कम करने को रोकने के लिए विस्तार होगा।

combineReducers({ 
    home: {createUiReducer('home', initialState), ...home} 
}) 

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

Answer 1

ठीक है आपको उन्हें उपसर्ग के साथ नामस्थान की आवश्यकता होगी।)

यह एक तरह

..

const createOpenCloseReducer = (prefix, initialState) => { 
    const = ui = prefix + "_UI"; 

    return (state = initialState, action) => { 
    switch(action.type) { 
    case (prefix + "_CLOSE"): 
     return { ...state, [ui]: "CLOSED" } 
    case (prefix + "_OPEN"): 
     return { ...state, [ui]: "OPENED" } 
    default: 
     return state 
    } 
    } 
} 

import { combineReducers, createStore } from 'redux'; 

const rootReducer = combineReducers({ 
    home: combineReducers({ 
     ui: createOpenCloseReducer("HOME", { "HOME_UI": "CLOSED" }), 
     data: someOtherHomeDataReducer 
    }), 
    someOther: createOpenCloseReducer("OTHER", { "OTHER_UI": "CLOSED" }) 
}) 

store = createStore(rootReducer) 

// use it.. 
store.dispatch({type: "HOME_CLOSE"}) 
store.dispatch({type: "OTHER_OPEN"}) 

// your state.. 
store.getState().home.ui // {HOME_UI: "CLOSED"} 
store.getState().someOther // {OTHER_UI: "OPENED"}