問題タブ [redux-thunk]

私はかなり新しく、react と redux を使用して簡単なブックマーク アプリケーションを構築しようとしています。

この問題について頭を回転させることはできません:

ユーザーは1 つのブックマークを作成して、複数のフォルダに追加できます。そのため、アクションをディスパッチし、addMark(bookmark)その後、addMark(folder)またはeditFolder(folder)フォルダーが既に存在する場合。ご覧のとおり、ブックマークとフォルダーは同じアクションで追加されます。これは、私のステート ツリーでは、どちらも単なるマークであり、type プロパティによって区別されるためです。

私の問題：ブックマークのフォルダリストに追加する新しいブックマークであるフォルダオブジェクトをどのように伝えることができますか? 2 つのディスパッチの間に新しく作成されたブックマークの ID を取得するにはどうすればよいですか?

満足できない解決策：

1. レデューサーでブックマーク ID が (既存のブックマーク ID を介して) 生成される方法を知っているMath.maxので、2 つのディスパッチ間で新しいブックマーク ID を再現できます。これは悪いハックのように思えます。
2. ブックマークとフォルダーは同じ状態ブランチ (同じレデューサー) に保持されます。どちらも単なる「マーク」であるため、最後に追加されたブックマークを参照する状態プロパティを持つことができますが、これも悪いハックのように思えます。

私が持っているものを理解するための少しのソースコード:

そして、コンテナー コンポーネントである AddMark 内:

これに対する満足のいく解決策が見つかりません。

レデューサーとアクションに関する初心者の質問。redux のドキュメントから:

アクションは、何かが起こったという事実を記述しますが、それに応じてアプリケーションの状態がどのように変化するかは指定しません。

と

同じ引数を指定すると、リデューサーは次の状態を計算して返す必要があります。驚く様な事じゃない。副作用はありません。API 呼び出しはありません。突然変異なし。ただの計算。

したがって、次のシナリオを考えてみます。

1. ユーザーは地図上にポイントを配置し、それらのポイント間のルートを取得できます。
2. ユーザーが最初にマップをクリックすると、これが開始点になります。彼が 2 回目にクリックしたとき - これが彼の終点です。その後クリックすると、前のポイントと終了位置の間にポイントが追加されます。
3. 各ポイントが追加された後 (最初のポイントを除く)、新しいポイントと前のポイントの間のルートを計算する必要があります。したがって、S -> A -> F があり、ポイント B を追加する場合 (S -> A -> B -> F)、2 つのルートを計算する必要があります A -> B および B -> F

したがって、3+ ポイントを追加すると、2 つの副作用があります。

• リストの末尾以外に新しい点が配置されます
• 新しいルートは、フィニッシュ ポイントまで計算する必要があります。

Point 構造を次のようにモデル化すると:

アクションでアイテムの位置計算とルート検索を実行するのは正しいですか?

私にとって、これは「しかし、アプリケーションの状態がどのように変化するかを指定しないでください」と矛盾します-アクションから、新しいポイントを挿入する場所を指定しているためです。
レデューサーで挿入位置を計算できましたが、フィニッシュ ポイントのルート データを取得するにはどうすればよいですか?
ここで正しいアプローチは何ですか？

Oauth2 の「リダイレクト フロー」を使用してユーザーを認証するアプリケーションがあります。つまり、ユーザーは別の Web サイトにリダイレクトされてログインし、その後自分のサイトにリダイレクトされます。

ドキュメントやその他の情報源はすべて、ビジネス ロジックはアクション クリエーターまたはリデューサーのいずれかに配置する必要があると主張しているようです。ただしlogin()、状態をまったく変更しない関数があります。それは、アプリケーションの現在の状態を localStorage のプレーンオブジェクトとして保存し、ユーザーを承認サーバーにリダイレクトすることです。ユーザーがログインしてリダイレクトされると、(別のコードによって) 状態が復元され、初期状態としてストア クリエーター関数に渡されます。

私の質問: 関数のロジックはlogin状態を取得するだけですが、状態を変更しないため、リデューサーには属しません。また、アクション作成者の定義であるアクションも返しません。アプリケーション構造のどこに配置すればよいですか?

実際にはアクションを作成しないアクション作成者がいても「大丈夫」ですか? 私は今 redux-thunk でこれを行っています (必要があるためgetState())。問題なく動作しますが、実際には「アクション作成者」ではないため、気分が悪くなります。一方で、logout()返す関数もあります。同じ場所に住んでいるように感じるアクション。まれなケースだと思いますが、この方法で状態を保存し、訪問者を他のサイトにリダイレクトする (またはリダイレクトせずに状態を保存するだけである) 理由がたくさん考えられるため、実際にはそうではありません。

PS。reduxストアをlocalStorageと自動的に同期するライブラリがあることは知っていますが、これは問題のポイントではありません。

編集:いくつかの明確化:

ビジネス ロジックを配置する場所に関する Redux ドキュメントから:レデューサーまたはアクション クリエーターにロジックのどの部分を配置する必要があるかについて、明確な答えは 1 つもありません。

読み進めると、ビジネス ロジックを配置する場所は、レデューサーまたはアクション クリエーターの 2 つだけであることが明らかになりました。今、私がやりたいことは状態に影響を与えず、レデューサーは定義上状態に影響を与えるため、このロジックをアクションクリエーターに入れることに傾いています。

アクション クリエーターに関するドキュメント:アクション クリエーターはまさに、アクションを作成する関数です。「アクション」と「アクション クリエーター」という用語は混同しやすいので、できるだけ適切な用語を使用してください。[...] Redux では、アクション作成者は単純にアクションを返します

アクションに関するドキュメント:アクションはプレーンな JavaScript オブジェクトです。

私のログイン例の擬似コード:

アクション クリエーターの目的であるアクションを返さないため、このコードは明らかにアクション クリエーターでは使用できません。ただし、状態を取得する必要があるため、完全に独立させることもできません。

繰り返しになりますが、問題は、このコードをアプリケーション構造のどこに置くかです。

繰り返しますが、コードは機能し、すべてがうまくいっているので、これは学術的な質問だと思いますが、ここで Redux の本質的なルールを明らかに破っていることに非常に悩まされています。たぶんそれはただの例外ですか？

レデューサーからアクション クリエーターを呼び出すために redux-loop を使用しています。これは正常に機能します。

ただし、一部のアクション クリエーターにもサンクを使用しています。通常のアクション クリエーターをサンクに変換すると、redux-loop で使用できなくなります。

レデューサーで redux-loop からサンクを呼び出す方法はありますか?

全て：

非同期アクションhttp://redux.js.org/docs/advanced/AsyncActions.htmlに関するチュートリアルに従おうとするとき、私はReduxにかなり慣れていません

サンクと呼ばれる概念があります。非同期アクションを実行するためにサンクが必要な理由、単に init シグナルをディスパッチしてからデータをフェッチしてから、フェッチ データからプロミスで終了シグナルをディスパッチできない理由がよくわかりません。

ありがとう

Redux を試してみたところ、ajax 呼び出しを行うにはミドルウェアが不可欠であることがわかりました。redux-thunk と axios パッケージを別々にインストールし、結果を状態としてフックして、ajax の結果をコンポーネントにレンダリングしようとしました。しかし、ブラウザー コンソールにエラーが表示され、リデューサーがペイロードを取得できませんでした。

エラー：

キャッチされていないエラー: アクションはプレーン オブジェクトである必要があります。非同期アクションにはカスタム ミドルウェアを使用します。

これは私のコードの一部であり、ミドルウェアがどのように接続されているかです:

私の行動:

レデューサー:

状態のroutesサイズは 0 ですが、アクション ペイロードの配列は 3 です。

本当にありがとうございました。

私はreduxとreactjsが初めてで、サーバー側のデータを自分のコードにフェッチしようとしています。

これは私のサンクフェッチです:

これは、コンソールに表示されるものです。

フィドラーでは、予想どおり「成功」という応答が表示されます。

この応答は有効ですか、どのように解析すればよいですか。少し混乱しており、オンラインの情報はほとんどありません。

編集：

私は次のように変更しました：

そして、私はオブジェクトを受け取りました。複合型 (リスト) を送信すると、次のように表示されます。

redux thunk はアクション作成者によって返された関数を非同期的に呼び出すため、アクション作成者を呼び出した後、次に進む前に redux が実際にアクションをディスパッチしたことを確認するにはどうすればよいですか?

サーバーへの各 POST リクエストの前に CSRF トークンをフェッチする必要があり、両方の手順に対応するアクションがあります。

問題は、これらのアクションクリエーターを連続して呼び出すと、何らかの理由で POST アクションが CSRF アクションがディスパッチされる前にディスパッチされることです。これらの懸念事項を分離したいので、アクションを結合したくありません。

アクションクリエーターの呼び出しコードを、それらのアクションをディスパッチする redux thunk と同期するにはどうすればよいですか?

これは、実際にはredux-thunkの例からのコードです。

これが私が取り組んでいるものです：

「コード スニペットを実行」すると、次のエラーが表示されます。

キャッチされない RangeError: 最大呼び出しスタック サイズを超えました

また、さまざまなリンクを試しました。