Nesting `combineReducers` lassen seinen Zustand nicht ohne verschachtelte Objekte haben

Question

Ich habe bookManageReducer.jsx:

import { combineReducers } from 'redux' 
import { 
    REQUEST_BOOKS_PAGE, 
    RECEIVE_BOOKS_PAGE 
} from '../constants/dashboardConstants' 

const books = (state = [], action) => { 
    switch (action.type) { 
    case RECEIVE_BOOKS_PAGE: 
     return action.books 
    default: 
     return state 
    } 
} 

const booksState = (state = {isFetching: false}, action) => { 
    switch (action.type) { 
    case REQUEST_BOOKS_PAGE: 
     return {isFetching: true} 
    case RECEIVE_BOOKS_PAGE: 
     return {isFetching: true} 
    default: 
     return state 
    } 
} 
// ... 
const booksManageReducer = combineReducers({ books, employees, employeesList, booksPagination, booksState }) 

export default booksManageReducer 

Was ich will, ist dashboardReducer.jsx alle Zwischen Reduzierungen in Wurzelminderer zu kombinieren:

import { combineReducers } from 'redux' 
import { routerReducer } from 'react-router-redux' 
import booksManageReducer from './booksManageReducer' 

const companyId = (state = {}, action) => { 
    return state 
} 

const dashboardReducer = combineReducers({booksManageReducer, companyId, routing: routerReducer}) 

export default dashboardReducer 

Welche produzieren diesen Zustand:

Object {booksManageReducer: Object, companyId: 1, routing: Object} 

anstelle von

Object {books: [], ..., companyId: 1, routing: Object} 

Wenn ich versuche, Objekt Verbreitung Operator zu verwenden:

const dashboardReducer = combineReducers ({... booksManageReducer, CompanyID, Routing: routerReducer})

Es verschwindet nur vom Staat, und Object.assign funktioniert auch nicht.

Answer 1

Kombinieren Sie diese nicht zu booksMangeReducer. Stattdessen nur sie alle als benannte Exporte exportieren und alle Reduzierungen auf einmal kombinieren:

export { 
    books, 
    employees, 
    employeesList, 
    booksPagination, 
    booksState 
}; 

Dann importieren sie alle:

import { 
    books, 
    employees, 
    employeesList, 
    booksPagination, 
    booksState 
} from './booksManageReducer' 

Dann sie alle individuell kombinieren mit combineReducers:

combineReducers({ 
    books, 
    employees, 
    employeesList, 
    booksPagination, 
    booksState, 
    companyId, 
    routing: routerReducer 
}); 

combineReducers verwendet die Schlüssel des übergebenen Objekts, um den Status zu erstellen. Dies ergibt die gewünschte Hierarchie.

Eine andere Möglichkeit, die ähnlich ist, was Sie tun, ein Objekt könnte den Export enthält alle Reduzierungen selbst importieren dann das Objekt und verbreiten es:

export default { 
    //books, employees, etc. 
}; 

Dann:

import reducers from './booksManageReducer'; 

Schließlich:

combineReducers({ 
    ...reducers, 
    companyId, 
    routing: routerReducer 
});