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