2016-04-26 159 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