2016-04-26 21 views
1

我有一个带有控件的仪表板,它们依赖于当前用户。所以我们不知道在编译时哪些小部件将要加载。也就是说,国家也会为这些小部件设置动态字段。每个小部件都有一个缩减器。我如何结合所需小部件的所有缩减器?动态缩减器组合

我的状态可能看起来像:

{ dashboardId: 12, 
    widgetList:{ 

     w1: { 
      widgetTitle:'widget 1' 
      data:[] 
     }, 
     w2:{ 
      widgetTitle:'widget 2' 
      data:[] 

     } 
    } 
} 

现在我想减速结合:

combineReducers({ 
    w1:widget1Reducer, 
    w2:widget2Reducer 
}) 

现在,这个问题是我们不知道它的所有部件都将加载当前仪表盘。

回答

1

您不需要使用助手合并多个缩减器。创建一个widgetList减速器,将使用适当的插件更新减速器指定小窗口:

function widgetList(state = {}, action) { 
    switch (action.type) { 
    case WIDGET_A_FOO: 
    case WIDGET_A_BAR: 
     return { 
     ...state, 
     [action.id]: widgetA(state[action.id], action), 
     } 

    case WIDGET_B_BAZ: 
     return { 
     ...state, 
     [action.id]: widgetB(state[action.id], action), 
     } 

    case DELETE_WIDGET: 
     return _.omit(state, action.id) 

    default: 
     return state 
    } 
} 

在上述例子中,action.id保持微件ID。 widgetAwidgetB是窗口小部件A和窗口小部件B的缩减器。

+0

谢谢,这很整洁:) – user1803361

+0

我看到的唯一缺点是我们可能最终导入所有窗口小部件(〜100)的减速器。我使用的是webpack,有没有什么办法可以下载当前页面所需的reducer? – user1803361