रिएक्ट-रेडक्स: रेड्यूसर का संयोजन

Question

में विफल रहता है मेरे पास रेडक्स और रेडक्स-थंक का उपयोग करके एक रिएक्ट ऐप बनाया गया है। सब कुछ ठीक काम करता है, जब तक कि मैं Redux docs प्रति reducers को गठबंधन करने की कोशिश नहीं करता।

एक प्रारंभिक, कार्यात्मक कम करने

export default function bigReducer(state = { events: [], flash: [] }, action) { 
    switch (action.type) { 
    case EVENTS_UPDATED: 
    return _.extend({}, state, { events: action.pathway_events }) 
    case FLASH_MESSAGE_UPDATED: 
    return _.extend({}, state, { flash: action.flash }) 
    default: 
    return state 
    } 
} 

जब मैं एक समग्र कम करने

function flashReducer(state = { flash: [] }, action) { 
    switch (action.type) { 
    case FLASH_MESSAGE_UPDATED: 
    return _.extend({}, state, { flash: action.flash }) 
    default: 
    return state 
    } 
} 

function eventReducer(state = { events: [] }, action) { 
    switch (action.type) { 
    case EVENTS_UPDATED: 
    return _.extend({}, state, { events: action.pathway_events }) 
    default: 
    return state 
    } 
} 

// either with simple reducer composition 
export default function bigReducer(state = {}, action) { 
    return { 
    flashReducer: flashReducer(state.flash, action), 
    eventReducer: eventReducer(state.events, action) 
    } 
} 

// or with the combineReducers function 
export default const reducer = combineReducers({ 
    flashReducer, 
    eventReducer 
}) 

प्रारंभिक अवस्था बनाने का प्रयास करें और reducers

मिश्रित करने लगते हैं को देखते हुए

// logging the state 
var EventListContainer = connect((state) => { 
    console.log(state) 
    return { events: state.events })(React.createClass({ ... 

// returns the incorrect state 
# => Object {flashReducer: Array[0], eventReducer: Array[17]} 

मैं रिएक्ट और रेडक्स का उपयोग कर रेड्यूसर को कैसे जोड़ सकता हूं?

Answer 1

दस्तावेज़ों से मेरी समझ यह है कि नामित रेड्यूसर को राज्य के केवल उस हिस्से को नियंत्रित करने के लिए रेड्यूसर नाम से संबंधित शीर्ष-स्तरीय कुंजी के साथ सौंप दिया जाता है। तो

const reducer = combineReducers({ 
    flashReducer, 
    eventReducer 
}) 

का तात्पर्य राज्य की तरह

const state = { 
    flashReducer: {...}, 
    eventReducer: {...} 
} 

तो तुम एक) उच्च-स्तरीय चाबियाँ वे प्रबंधन करने वाले रहे हैं के रूप में ही अपने reducers नाम के लिए की जरूरत है कि आप, और ख) उनकी राशि डिफ़ॉल्ट स्थिति केवल पूर्ण राज्य ऑब्जेक्ट का सबसेट दर्शाती है:

function flash(state = [], action) { 
    switch (action.type) { 
    case FLASH_MESSAGE_UPDATED: 
    return action.flash.slice() 
    default: 
    return state 
    } 
} 

function events(state = [], action) { 
    switch (action.type) { 
    case EVENTS_UPDATED: 
    return action.pathway_events.slice() 
    default: 
    return state 
    } 
} 

const reducer = combineReducers({ 
    flash, 
    events 
})