React-Redux: Das Kombinieren von Reduzierungen schlägt fehl

Question

Ich habe eine React App, die mit Redux und Redux-Thunk erstellt wurde. Alles funktioniert gut, bis ich versuche, Reduzierungen pro Redux docs zu kombinieren.

ein erster, funktioneller Minderer

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 
    } 
} 

Gegeben Wenn ich versuche,

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 
}) 

den Anfangszustand und die Reduzierungen einem zusammengesetzten Minderer scheinen zu schaffen, um verwechseln

// 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]} 

Wie kann ich Reduktoren mit React und Redux kombinieren?

Answer 1

Mein Verständnis von der Dokumentation ist, dass ein benannter Reduzierer delegiert ist, um nur den Teil des Status mit dem obersten Schlüssel zu behandeln, der dem Reduzierernamen entspricht. So

const reducer = combineReducers({ 
    flashReducer, 
    eventReducer 
}) 

bedeutet, dass Sie haben Staat wie

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

So müssen Sie a) auf Ihre Reduzierungen nennen die gleichen wie die Top-Level-Schlüssel, die sie angeblich sind zu verwalten, und b) haben ihre Der Standardstatus repräsentiert nur die Teilmenge des vollständigen Zustandsobjekts:

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 
})