将 reducer 分配给嵌套状态属性？

Question

使用下面的 react/redux 设置：

index.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')
)

store.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

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

extratextsothisquestionisntallcodeandcanbesubmitted

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),
  }),
})

将 reducer 分配给嵌套状态属性？

Assign reducer to nested state property?

reactjs

redux

react-redux

将 reducer 分配给嵌套状态 属性？

Assign reducer to nested state property?

reactjs

redux

react-redux

将 reducer 分配给嵌套状态属性？