Javascript 具有相同redux组件的多个实例

我正在使用react redux动态创建的每个小部件构建一个包含多个小部件的react应用程序

当小部件中的更新反映在所有其他小部件中时，我遇到了一个问题

有没有办法处理multi-reducer来处理每个小部件的独立数据

减速器

import { combineReducers } from 'redux';

const widgetReducer= (state = {}, action) => {
    switch (action.type) {
        case 'SET_API':
            return { ...state, API: action.payload.API };
    }

    return state;
}

export default combineReducers({
    widget: widgetReducer
});

行动

export const SetAPI = (data) => {
    return {
        type: "SET_API",
        payload: {
            API: data
        }
    }
}

index.js

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers'
const store = createStore(reducers)
<Provider store={store}><Widget /></Provider>

从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“./还原程序”导入还原程序
常量存储=创建存储（还原器）

您可以通过为每个新创建的小部件分配唯一的id，并创建一个新的父级缩减器作为包装器，为每个小部件创建动态缩减器，如：

import { combineReducers } from 'redux';

const widgetReducer= (state = {}, action) => {
    switch (action.type) {
        case 'SET_API':
            return { ...state, API: action.payload.API };
    }

    return state;
}

export widgetsContainerReducer(state = {}, action) {
   
   switch(action.type) {
    case 'SET_API':
    case 'WIDGET_ACTION_1':
    case 'WIDGET_ACTION_2': // other widget specific actions  
      const widgetId = action.payload.id;
   
      return {
        ...state,
        [widgetId]: widgetReducer(state[widgetId], action)
      }}
    default:
      return state;
   }
}

export default combineReducers({
    widgets: widgetsContainerReducer
});

然后为每个小部件特定的每个操作提供一个小部件id：

export const SetAPI = (widgetId, data) => {
    return {
        type: "SET_API",
        payload: {
            API: data,
            id: widgetId
        }
    }
}

生成的减速器将如下所示：

{
   widgets: {
      widget-1: {
        API: 'api-1'
      },
      widget-2: {
        API: 'api-2'
      },
      ...
   }

}

---

如果您试图创建动态小部件，那么您的操作也应该是动态的，不是吗？直到现在它们还不是。@Shuvo我正在尝试处理这个问题，但我需要找出解决这个问题的好方法。