减速器的动态组合

Question

我有一个带有小部件的仪表板，它们取决于当前用户。所以我们不知道在编译时要加载哪些所有小部件。也就是说，该州也将为这些小部件提供动态字段。我为每个小部件都有一个减速器。如何组合所需小部件的所有化简器？

我的状态可能看起来像：

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

现在我想组合减速器：

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

现在，问题是我们不知道将为当前仪表板加载哪些所有小部件。

Answer 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。 widgetA 和 widgetB 是小部件 A 和小部件 B 的化简器。