动态生成 Redux Reducer答案

【问题标题】：Dynamically Generate Redux Reducers动态生成 Redux Reducer
【发布时间】：2016-12-26 22:52:05
【问题描述】：

我对如何在 Redux 中动态创建 reducer 有点困惑。我发现了一些关于这个主题的 Stackoverflow 问题，但它们似乎涵盖了不同的用例，很遗憾我对建议的解决方案感到困惑。

这是我的用例。我有一个可供用户使用的 React DnD 组件托盘。当用户将组件拖到指定的放置区域时，我正在构建一个简单的 div 用于视觉表示和参考。该组件将包含一个 ID 作为 props，当它被删除时，我会将 ID 添加到 div 中，并且我想为被删除的组件创建一个新的 reducer，并将组件 ID 作为全局状态对象的属性。

这个ID会将全局状态对象上的属性映射到ui上的div。

我可以稍微关注一下这里的解决方案提供者，但是当我来到 routes.js 部分时我迷路了：How to dynamically load reducers for code splitting in a Redux application?

这就是我一直构造我的减速器的方式。我可以使用这种结构以某种方式动态生成新的减速器吗？

reducers/index.js

import { combineReducers } from 'redux';
import usersReducer from './users_reducer.js';

const rootReducer = combineReducers({
  users: usersReducer
});

export default rootReducer;

reducers/users_reducer.js

import {
    FETCH_USERS
} from '../actions/types';

const INITIAL_STATE = { all: [], user: {} };

export default function(state = { INITIAL_STATE }, action) {

    switch (action.type) {
        case FETCH_USERS:
            return {...state, all: action.payload };
        default:
            return state;
    }

}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reducers from './reducers';
import routes from './routes.js';
import promise from 'redux-promise';
import reduxThunk from 'redux-thunk';
import logger from 'redux-logger';

const createStoreWithMiddleware = applyMiddleware(
    reduxThunk,
    logger()
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes}/>
  </Provider>
  , document.querySelector('#app')
);

任何关于我应该如何构建这个流程的建议将不胜感激！

【问题讨论】：

标签： reactjs redux

【解决方案1】：

动态生成reducer 仅对代码拆分有用，当您创建商店时reducer 代码尚不存在时。在你的情况下，我会为 DnD 组件安装一个减速器并模拟如下状态：

{
  users: { all: [], user: {} },
  dnd: { all: [], components: {} },
}

【讨论】：