कैसे redux राज्य अद्यतन करने के लिए आगे पेड़

Question

किसी दिए गए कम करने के लिए नीचे, मेरे redux राज्य वृक्ष आम तौर पर इस तरह दिखता है:

{ 
    someField: 'some value', 
    // ... more fields 
    metadata: { 
    pending: false, 
    fetched: true, 
    } 
} 

आमतौर पर, जब मैं एक async अनुरोध करते हैं, मैं एक SOME_ACTION_REQUEST कार्रवाई आग है, जो metadata.pending संपत्ति को सत्य पर सेट करता है। जब मिलान SOME_ACTION_RESPONSE या SOME_ACTION_ERROR मिलान बाद में ट्रिकल्स को फिर से गलत पर रीसेट कर दिया जाता है।

हालांकि, जिस तरह से मैं राज्य को अद्यतन थोड़ा वर्बोज़ है:

case actions.SOME_ACTION_REQUEST: { 
    return { 
    ...state, 
    metadata: { ...state.metadata, pending: true }, 
    }; 
} 

वहाँ ऐसा करने का एक सरल तरीका है?

Object.assign({}, state, { metadata: { pending: true } }) या तो बहुत पठनीय नहीं है।

Answer 1

आप रेड्यूसर की घोंसला वाली संरचना के लिए जा सकते हैं।

जहां फ़ंक्शन/रेड्यूसर नामकरण मेटाडेटा है, इसे फ़ील्ड बदलने के लिए कॉल करें।

उदाहरण कोड

const metadata = (state = [], action = {}) => { 
    switch (action.type) { 
     case actions.SOME_ACTION_REQUEST:: 
      return {...state, ...action.payload.metadata}; 

     default: 
      return state; 
    } 
}; 
const someReducer = (state = initalState, action = {}) => { 
    let metadata = {}; 
    switch (action.type) { 
     case actions.SOME_ACTION_REQUEST: { 
      metadata = metadata(state.metadata, action) 
      return { 
       ...state, 
       ...metadata 
       }; 
      } 
    } 
}; 

Answer 2

यह अपरिवर्तनीय डेटा अपडेट करने का एक सुंदर सामान्य उदाहरण है। आप कुछ और जानकारी, विशेष रूप से Prerequisite Concepts और Immutable Update Patterns पृष्ठों के लिए Redux दस्तावेज़ों के नए Structuring Reducers अनुभाग के माध्यम से पढ़ना चाह सकते हैं।

Answer 3

हाँ, यह वास्तव में रेडक्स का नकारात्मक पक्ष है, न केवल - यदि आप मोबक्स का उपयोग करेंगे, तो आपको एक ही समस्या होगी। तो, जवाब किसी भी तरह इसे सामान्यीकृत करने के लिए है - एक रेड्यूसर फैक्ट्री लिखें, जो तर्क के रूप में स्थिरांक प्राप्त करेगा, और उन्हें एक बार मर्ज करें, और सभी एसिंक कार्यों के लिए इसका पुन: उपयोग करें।

I've created a library बिल्कुल इस समस्या के लिए, तो इसे देखने में संकोच न करें। साथ ही, ध्यान रखें कि कच्चे रेडक्स वैसे भी बहुत वर्बोज़ है, और अपने डोमेन मॉडल को सर्वोत्तम तरीके से समझने का प्रयास करें। आपका उदाहरण है कि तरह दिखेगा: पिछले चयनकर्ता से

import { createTile } from 'redux-tiles'; 

const someTile = createTile({ 
    type: ['some', 'example'], 
    fn: ({ api, params }) => api.get('/some/request', params), 
}); 

dispatch(actions.some.example(params)); 
selectors.some.example(state)); // { isPending: true, error: null, data: null } 

डाटा अपडेट किया जाएगा स्वचालित रूप से करने के बाद प्रतिक्रिया मिल जाएगा - तो ऐसी कोई सामान मैन्युअल लिखने के लिए की जरूरत है।

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