嵌套`combineReducers`不允许没有嵌套对象的状态

Question

我有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

我想要的是在root reducer中结合所有中间的reducer dashboardReducer.jsx：

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

哪个产生这种状态：

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

代替

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

当我尝试使用对象传播运算符时：

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

它只是从状态中消失了，Object.assign也不起作用。

Answer 1

不要将它们合并为booksMangeReducer。相反，只需将它们全部导出为命名的导出，然后一次合并所有的reducer：

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

然后全部导入：

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

然后将它们分别与combineReducers：

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

combineReducers使用传递的对象的键来构造状态。这将给出所需的层次结构。

与您正在执行的操作类似的另一种方法是，导出包含所有reducer本身的对象，然后导入该对象并将其散布：

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

然后：

import reducers from './booksManageReducer';

最后：

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