Nesting `combineReducers` doesn't let to have state without nested objects

问题

I have 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

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

Which produce this state:

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

instead of

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

When I try to use object spread operator:

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

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

回答1:

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

Then import them all:

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

Then combine them all individually with combineReducers:

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

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

Then:

import reducers from './booksManageReducer';

Finally:

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

来源：https://stackoverflow.com/questions/44621515/nesting-combinereducers-doesnt-let-to-have-state-without-nested-objects

标签

reactjs

redux

react-redux