动态生成 Redux Reducer

Posted 2023-02-22

【中文标题】动态生成 Redux Reducer

【英文标题】：Dynamically Generate Redux Reducers

【发布时间】：2016-12-26 22:52:05

【问题描述】：

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

这是我的用例。我有一个可供用户使用的 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')
);

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

【参考方案1】：

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

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