Question

我对如何在Redux中动态创建Reducer感到困惑。我在这个主题上找到了一些Stackoverflow问题，但它们似乎涵盖了不同的用例，我很遗憾地与建议的解决方案混淆。

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

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

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

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

减速器/ index.js

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

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

export default rootReducer;

减速器/ 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')
);

关于如何构建此流程的任何建议都将非常感谢！

Answer 1

动态生成Reducer仅对代码拆分有用，当您在创建商店时还没有使用reducer代码时。在你的情况下，我会为DnD组件安装一个reducer，并为状态建模，如：

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

动态生成Redux Reducers

1 个答案: