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

我想要的是将根减速器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
});

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

1 个答案: