web-dev-qa-db-ja.com

Reduxとレデューサー内で別のレデューサーにアクセスするにはどうすればよいですか？

つまり、複数のレデューサーがあり、複数のアクションクリエーターが関連付けられているアプリがあります。

レデューサーの1つが（編集のために）状態を更新する場合があります。そのため、他のレデューサーがこの更新を確認し、それに応じて状態を調整する必要があります。

ユーザーが「スニーカー」を選択したかのように考えてください。この状態管理は、productsReducerと呼ばれるレデューサーで行われます。そのため、ユーザーがアプリプロセスを移動すると、それに関連付けられたcouponsReducerが取得されます...ただし、ユーザーはいつでも「編集」できるため、「スニーカー」を編集して別のプロデューサーを選択すると、私はプログレスモーダルはこれを反映する必要があるため、couponsReducerをリアルタイムで変更できます。クーポンページへのフローを経由してこれを行うことができます。そのページでは、componentWillMountのデータを調整するだけです...しかし、こすりは進行状況モーダルがあり、クーポンページにアクセスする前に、ユーザーは次のことができます。プログレスモーダルを開きます...そしてここでミスマッチが発生します...

私が知っている長い間、私は自分の状況を説明したかっただけです。

そのため、productsReducer内から「他のレデューサー」またはそのアクションクリエーターを呼び出すことができるようにしたいと思います。

ここでは、特定の「action.type」をスニッフィングし、それが表示された場合に他のaction.typeをディスパッチできるミドルウェアが適切でしょうか、それともproductsReducer内からアクションクリエーターを呼び出す方法がありますか？

インポート： './ couponsActions'からクーポンとして*をインポートし、その他の必要なアクションは不適切と思われます。

reduxreact-redux
11
james emanon

アプリケーションの状態に基づいて状態を更新することは、アンチパターンです。解決策はさらに簡単です。

アクションが複数のレデューサーに影響を与える場合は、気になるレデューサーでそのアクションをサブスクライブします。

したがって、ユーザーがsneakersを選択すると、これらのアクションを実行します

{ type: 'item_select', payload: 'sneakers' }

次に、couponsReducerに、次のようなものがあります。

function (state = initialState, action) {
  if (action.type == 'item_select') {
    return { ...state, activeProduct: action.payload);}
  }
  return state;
}

状態が他の状態の変化に依存している場合、カスケード更新は必要ありません。 1つのアクションがすべてに一度に影響を与える単純なディスパッチアーキテクチャが必要です。

20
Nathan Hagen

多くの場合、複数のレデューサーで同じアクションを処理するだけで十分です（これは、reduxで物事を行うための公式に推奨される方法です）。したがって、常に最初にそのソリューションを試してください。

より複雑なケースでは、使用できるライブラリがいくつかあります。たとえば、 redux-saga を使用すると、次のように処理できます。

function* watchItemSelect() {
    while(true) {
        // Wait for the action you are interested in
        const action = yield take('ITEM_SELECT');
        // Send another action
        yield put({type: 'OTHER_ACTION'}) 
        // The loop will now continue and wait until the next ITEM_SELECT action comes
    }
}

同じことをするが少し違う他のライブラリもあります。それらのほとんどはエルム言語に触発されています：

また、このリポジトリには、上記のライブラリの考え方に関する情報がいくつかあります。

redux-アーキテクチャ

1
Jonas Kello