将减速器分配给嵌套状态属性？

Question

使用下面的react/redux设置：

索引.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/app';
import configureStore from './store';

let initialState = {
  foods: {
    apple: {
      selected: false,
      flavors: {
        sweet: true,
        salty: false
      }
    },
    potatoChips: {
      selected: false,
      flavors: {
        sweet: false,
        salty: true
      }
    }
  },
  drinks: {
    < some other object >
  }
}

let store = configureStore(initialState);

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('app')
)

商店.js

import { applyMiddleware, compose, createStore } from 'redux';
import rootReducer from './root-reducer';
import logger from 'redux-logger';
import thunk from 'redux-thunk';

let finalCreateStore = compose(
  applyMiddleware(thunk, logger())
)(createStore)

let defInitialState = < same object as initialState above >

export default function configureStore(initialState = defInitialState){
  return finalCreateStore(rootReducer, initialState)
}

root-reducer.js

import { combineReducers } from 'redux';
import appleReducer from './apple-reducer';
import potatoChipsReducer from './potato-chips-reducer';


const rootReducer = combineReducers({
  foods.apple: appleReducer,
  foods['potatoChips']: potatoChipsReducer
  // HOW DO I DO THE ABOVE ASSIGNMENT?
})

export default rootReducer

我可以分配一个减速器来state.foods.apple像我在上面尝试做的那样吗root-reducer.js？或者我应该以不同的方式来解决这个问题？

额外文本所以这个问题不是所有代码并且可以提交

Answer 1

可以筑巢了combineReducers。

示例： https: //jsfiddle.net/2rhs2m9y/

const foodsReducer = combineReducers({
  apple: appleReducer,
  potatoChips: potatoChipsReducer,
})

const rootReducer = combineReducers({
  foods: foodsReducer,
})

所以你的appleReducer意志只接收foods.apple树作为它的状态，等等。

您也可以这样做（这本质上就是combineReducers为您做的事情）：

const rootReducer = combineReducers({
  foods: (state, action) => ({
    apple: appleReducer(state.apple, action),
    potatoChips: potatoChipsReducer(state.potatoChips, action),
  }),
})