嵌套`combineReducers` 不允许在没有嵌套对象的情况下拥有状态 [英] Nesting `combineReducers` doesn't let to have state without nested objects

问题描述

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

What I want is to combine all intermediate reducers in root 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}

当我尝试使用对象扩展运算符时:

When I try to use object spread operator:

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

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

It just disappears from the state, and Object.assign doesn't work either.

推荐答案

不要将它们组合成 booksMangeReducer.相反，只需将它们全部导出为命名导出并立即组合所有减速器:

Don't combine them into booksMangeReducer. Instead, just export them all as named exports and combine all the reducers at once:

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

然后全部导入:

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

然后用 combineReducers 将它们单独组合起来:

Then combine them all individually with combineReducers:

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

combineReducers 使用传递对象的键来构造状态.这将提供所需的层次结构.

combineReducers uses the keys of the passed object to construct state. This will give the desired hierarchy.

另一种与您正在执行的操作类似的方法是导出一个包含所有减速器本身的对象，然后导入该对象并传播它:

Another way which is similar to what you're doing could be exporting an object containing all the reducers themselves, then import the object and spreading it:

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

那么:

import reducers from './booksManageReducer';

最后:

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

这篇关于嵌套`combineReducers` 不允许在没有嵌套对象的情况下拥有状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！