Reactjs React/redux，显示多个组件，共享相同的操作，但状态不同

假设我有一个可重复使用的容器。这是一个有多个页面的向导

向导状态由redux/actions驱动。当一个动作被触发时，我使用一个reducer来更新我的状态

如果我想复制多个向导，并使其具有自己的状态，该怎么办

我认为必须有一种方法让某个动态还原程序（可以创建/销毁）处理操作，然后让每个单独的向导从存储/状态的这些动态部分驱动

---

这是推荐的吗？有没有使这更容易的库？

只需将主状态划分为所需的多个向导状态，并随每个操作发送向导id，以便您的reducer知道要处理哪一个

As数组 您可以编写向导缩减器，它了解如何缩减单个向导状态

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;
    }
  });
}

最后，使用

combinereducer

创建一个根减速机，它将

向导

属性的责任委托给该

向导减速机

combineReducers({
  wizards: 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
  };
}

OP要求为它提供一个lib，所以我就把它扔到这里

我创建了infra函数，它将截取操作并向每个操作添加
元数据。（以下为FSA
）
您可以轻松地使用它来创建多个容器，而不会使它们相互影响

我的组件是否应该生成唯一id？我在哪里存储/范围id？处于组件的状态？我应该在安装/卸载组件时启动创建/销毁操作吗？大多数问题取决于应用程序中各个向导的生命周期和用途。如果在向导状态和向导组件之间存在真正的1-1关系，那么所有这些建议听起来都是合理的。还有其他人也在那里。
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
  };
}