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

Question

假設我有一個可重復使用的容器。 它是一個包含多個頁面的向導。

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

如果我想讓多個向導重復，並擁有自己的狀態，該怎么辦？

我認為必須有一種方法可以讓某個動態reducer（可以創建/銷毀）處理動作，然后讓每個單獨的向導從這些動態的存儲/狀態塊驅動。

這是推薦的嗎？ 這些庫是否更容易？

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要求提供一個lib，所以我只是把它扔到這里。

我創建了infra函數，它們將攔截動作並為每個動作添加meta-data 。 （遵循FSA ）您可以輕松地使用它來創建多個容器，而不會相互影響。

減速動作攔截