React/redux、複数のコンポーネントを表示、同じアクションを共有しているが状態は異なる

Question

私は再利用可能なコンテナを持っているとしましょう。複数ページのウィザードです。

ウィザード状態はredux/actionsによって駆動されます。アクションが実行されると、私は自分の状態を更新するために減速機を使います。

複数のウィザードを複製したい場合はどうすればいいですか？

特定のダイナミックレデューサー（作成/破棄可能）によってアクションを処理し、次にストア/ステートのこれらの動的な部分から個々のウィザードを駆動する方法が必要であると考えています。

これはお勧めですか？これをより簡単にするライブラリがありますか？

Answer 1

メイン州を必要なだけ多くのウィザード状態に分割し、それぞれのアクションとともにウィザードIDを送信して、どちらのタスクに対処するかを知ってください。

としては、Array

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

最後に、このwizardsReducerへwizardsプロパティの代表者の責任ルート減速を作成するためにcombineReducersを使用しています。オブジェクト

として

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

オペレータがこれについてのlibを要求しているので、ここでそれを投げています。

私はアクションを傍受し、各アクションにmeta-dataを追加するインフラストラクチャを作成しました。 （FSAの後） これを使用すると、複数のコンテナを相互に影響を与えずに簡単に作成できます。

reducer-action-interceptor