React-Redux: la combinazione di riduttori non riesce

Question

Ho un'app React creata utilizzando Redux e Redux-Thunk. Tutto funziona bene, fino a quando non provo a combinare i riduttori per lo Redux docs.

Dato un iniziale, riduttore funzionale

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

Quando cerco di creare un riduttore composito

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

lo stato iniziale e le riduttori sembrano confondersi

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

Come è possibile combinare i riduttori utilizzando React e Redux?

Answer 1

La mia comprensione da parte dei documenti è che un riduttore denominato è delegato a gestire solo quella parte dello stato con la chiave di primo livello corrispondente al nome del riduttore. Così

const reducer = combineReducers({ 
    flashReducer, 
    eventReducer 
}) 

implica che avete Stato come

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

quindi è necessario a) nominare le riduttori lo stesso come i tasti di alto livello che si suppone di gestire e b) avere la lo stato predefinito rappresenta solo quel sottoinsieme dell'oggetto full state:

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