問題タブ [redux-loop]

redux-loop複雑な ajax ワークフローを処理するために使用する例はありますか? 公式リポジトリは非常に最小限です。私が見つけることができた野生の1つの例（https://hackernoon.com/why-i-wrote-a-redux-async-outerware-277d450dba74#.2ocaloc58）から、redux-loopは非常に似ているようですredux-thunk へ。

複雑な ajax ワークフローの例を次に示します。

• Ajax ワークフロー1 . ユーザーは、結果テーブルで 2 つの異なるフィルターを選択します。各フィルターは ajax リクエストを開始し、それが順不同で解決されます。結果テーブルには、正しいフィルター選択が表示されます。エラーによって結果テーブルが更新されないようにする必要があります。
• Ajax ワークフロー 2
  • ユーザーがレポートの生成を開始します (これは長時間実行されるプロセスです)。
  • ユーザーが別のレポートに切り替えます。保留中の「レポート待ち」アクションをキャンセルまたは無視する必要があります。
• より複雑なワークフロー(古い redux-saga の例に基づく)
  • ユーザーがログイン ボタンを押すと、認証トークンを取得するための ajax リクエストが開始されます
  • また
    • ユーザーはすぐにログアウト ボタンを押します。これにより、保留中の認証アクションがキャンセルまたは無視されます。
    • または、解決時に認証トークンを保存する必要があります
  • ログアウト後またはログインエラーが発生した場合は、認証トークンをクリアする必要があります

少し変更してredux-loop の公式の例を実行します。

1. 代わりにfetch、タイムアウトで promise を使用します。
2. ログ ミドルウェアを追加しました (redux.js.org チュートリアルからコピーして貼り付けます)。

副作用関数:

行動：

初期状態：

レデューサー:

私のカスタム ログ ミドルウェア:

ストアを構成します。

最初のアクションをディスパッチしてすべてを開始する: (私のコード)

出力：

ご覧のとおり、2 番目のアクションはログ ミドルウェアをスキップし、ログの最後の行もわかりません。レデューサーが実際のユーザー オブジェクトではなく関数を受け取ったのはなぜですか?

ボタンをクリックすると、ウィンドウの場所を変更する必要があるreact reduxアプリケーションに取り組んでいます。現在、ボタンクリックアクションをディスパッチし、redux-loop を使用してレデューサーでナビゲーションを実現しようとしています。

コンポーネント js

アクションjs

レデューサーjs

エフェクトjs

このアクションとは別に、副作用と状態操作を伴う多くのアクションがあるため、redux-loop です。

2 つの質問があります。

1. navigateTo()ボタンのクリック時にコントロールが入りません。私は何を間違っていますか？

2. ここでは状態を操作していないため、レデューサーは適切な場所ではないと感じています。ボタン クリック アクションがディスパッチされるときに、このコードを配置するのに最適な場所はどこでしょうか?