React/redux，顯示多個組件，共享相同的動作，但狀態不同

Question

假設我有一個可重用的容器。這是一個有多個頁面的嚮導。

嚮導狀態由redux/actions驅動。當一個動作被觸發時，我使用一個減速器來更新我的狀態。

如果我想讓多個嚮導複製並擁有自己的狀態，該怎麼辦？

我在想，必須有一種方法來讓某個動態縮減器（可以創建/銷燬）處理動作，然後讓這些動態片段的存儲/狀態驅動每個嚮導。

這是推薦嗎？那些讓這更容易的圖書館？

Answer 1

只需根據需要將主狀態劃分爲多個嚮導狀態，並向每個動作發送一個嚮導ID，以便您的減速器知道要處理哪一個。

作爲陣列

{ 
    wizards: [ 
    { id: 'A', state: true }, 
    { id: 'B', state: false }, 
    { id: 'C', state: true } 
    ] 
} 

你可以寫一個嚮導減速器其瞭解如何減少單向導狀態。

function wizardReducer(wizard, action) { 
    switch(action) { 
    case 'TOGGLE': 
     return { 
     id: wizard.id, 
     state: !wizard.state 
     }; 
    default: 
     return wizard; 
    } 
} 

然後編寫一個wizardsReducer，瞭解如何減少嚮導列表。

function wizardsReducer(wizards, action) { 
    return wizards.map(function(wizard) { 
    if(action.id == wizard.id) { 
     return wizardReducer(wizard, action); 
    } else { 
     return wizard; 
    } 
    }); 
} 

最後，使用combineReducers創建根減速爲wizards屬性此wizardsReducer其代表的責任。

combineReducers({ 
    wizards: wizardsReducer 
}); 

爲對象

如果你存儲在一個對象，而不是你的嚮導，你必須構建你wizardsReducer略有不同。

{ 
    wizards: { 
    A: { id: 'A', state: true }, 
    B: { id: 'B', state: false }, 
    C: { id: 'C', state: true } 
    } 
} 

當我們可以直接選擇我們需要的狀態時，映射狀態並沒有什麼意義。

function wizardsReducer(wizards, action) { 
    if(!(action.id in wizards)) return wizards; 

    const wizard = wizards[action.id]; 
    const updatedWizard = wizardReducer(wizard, action); 

    return { 
    ...wizards, 
    [action.id]: updatedWizard 
    }; 
} 

Answer 2

OP要求爲此提供一個庫，所以我只是把它扔在這裏。

我創建了將攔截動作並將meta-data添加到每個動作的infra函數。 （以下爲FSA） 您可以輕鬆使用它創建多個容器，而不會相互影響。

reducer-action-interceptor