問題タブ [redux-thunk]

私が取り組んでいるプロジェクトは、ある種の HTML ページビルダーです。ユーザーは、メニューから事前に設計された HTML ページ セクション (ヘッダー、スライダー、コンテンツ ブロック、フッターなど) のリストから選択し、キャンバスにドロップして Web ページを作成できます。最終結果は、静的 Web サイトを含むダウンロード可能な zip ファイルです。

私のアプリケーションのレイアウトは、これまでのところ次のようになっています。

パート 1、2、3 をカバーしました。スライド アウト ドロワーであるパー​​ト 4 には HTML セクションが含まれており、クリックすると、対応するコンポーネントをページのメイン領域に追加したいと思います。このプロセスは、Web ページが構築されるまで繰り返されます。その後、各コンポーネントを編集して、最終的にページとして保存できます。

私がアドバイスを求めているのは、React/Redux を使用して、onclick のメイン領域に完全なコンポーネントを追加する方法です。

コンポーネントを参照する action/reducer をディスパッチすると仮定しますが、実際にメイン領域に追加されたコンポーネントを追加して追跡するにはどうすればよいでしょうか? jQuery を使用すると、これは単純な jQuery になります.load()が、React/Redux ではわかりません。React Router を使用して使用できるトリックでしょうか?

誰かが私を正しい方向に向けるのを手伝ってくれますか? 続きを読むなど

よろしくお願いします。

React Router を使用した Redux アプリがあります ( https://github.com/este/esteに基づく)。

1 つの Route 内に、複数の AJAX 呼び出し ( redux-promise-middleware&によって起動されるredux-thunk) がある場合があります。ページが (経由で) 変更されると、残りのすべてまたは前のルートによって起動されたコールバック react-routerを拒否したいと考えています。_SUCESS_FAILEDactions

これを行う最善の方法は何ですか？

関数を状態として redux ストアに保存するにはどうすればよいですか?

例：

関数をパラメーターとして redux-thunk ディスパッチャー関数に渡し、このフィルター関数を redux ストアに保存したい:

ReduxDevTools では、「フィルター」がディスパッチされず、ストアに保存されていることがわかります。これを行う方法はありますか？

ありがとう

更新:私の短縮されたレデューサー:

redux を使用して次の非同期ロジックをモデル化したいと考えています。

1. ユーザー アクションにより、一連の非同期 API 呼び出しがトリガーされます。
2. API 呼び出しで 401 ステータスが返される場合がある (ログイン タイムアウト)
3. API が 401 で応答した場合、再ログインのポップアップを表示する
4. 再ログインに成功したら、API 呼び出しを再発行して続行します

このロジックをどこに置くべきかわかりません。アクションは他のアクションを認識せず、ディスパッチにしかアクセスできないため、停止して完了するのを待つことはできません。レデューサーはディスパッチにアクセスできないので、そこに置くことはできません…では、それはどこにあるのでしょうか? カスタムミドルウェア? store.listen? スマートコンポーネントで？

現在、redux-promise-middleware と redux-thunk を使用しています。redux-saga や redux-rx などへの賛同を必要とせずに、このタイプのフローをどのように編成するのが最善でしょうか?

また、API 呼び出しを透過的に中断して他のアクションを実行する最善の方法もわかりません。つまり、API 呼び出しは、オプションのログイン プロセスが完了するまで、完了または失敗したアクションをトリガーしてはなりません。

react + redux + thunk の選択ボックスのデータをロードする方法と場所(つまり、アクションでディスパッチを呼び出す) を見つけようとしています。App コンテナーのコンストラクターに入れる必要があるのか​​、コンポーネント内にロードする必要があるのか​​ わかりません (私の例では「MyDropdown」)

私のメインアプリ：

私のコンポーネント

App クラス内で componentDidMount() を試しましたが、うまくいかないようです。子コンポーネント内でアクションを呼び出すのではなく、初期化データとアクションの呼び出しをすべて一元化するため、そこに配置することは理にかなっているようです。また、起動時に複数の選択ボックスをロードする必要があるため、App クラスがかなり大きくなる可能性がありますが、それは正しい方法ですか? 反応を学び始めたばかりなので、ベストプラクティスが何であるかわかりません。

私は過去数日間、自分で解決しようと数え切れないほどの時間を探してきましたが、役に立ちませんでした...本当に単純なサンクがありますが、実際のディスパッチは決して呼び出されません...

これはアクション作成者です:

私が見ることができる最初のログ、決して 2 番目のもの。私は自分の店を適切にセットアップしています（と思います）

サンクredux-thunkとして知られる関数を記述する場合、簡単に抽象化できるボイラープレートがたくさんあります。たとえば、ほとんどの非同期 API 呼び出しでは、副作用なしで次のことを行っています。

簡単！これはリクエストの少なくとも 70% をカバーしているため、上記のコードの割り当てを次のようなもの (疑似コード) に抽象化するエレガントな方法があると確信しています。

状態やその他の副作用を確認する必要がある場合は、適切なサンクに戻ることができます。ほとんどの場合...これを削減できますか？

エレガントなアイデアはありますか？