問題タブ [redux-thunk]

Redux を React プロジェクトに統合しようとしています。現在、私は Flux フレームワークを使用していません。

私のアプリは API からいくつかのデータを取得し、次のようにきれいな方法で表示します。

Redux について読んで、成功データをストアに保存する処理に使用できる 2 つのアプローチに落ち着きました。

• 非同期ミドルウェアを使用する、または
• ADD_DATAajax 関数の成功コールバックからアクションをディスパッチする

しかし、どちらがより良いアプローチかはわかりません。

コールバックでのアクションのディスパッチは、実装と理解が容易に思えますが、非同期ミドルウェアは、関数型言語の操作に慣れていない人には説明しにくいものです。

Redux の Writing Tests セクション ( http://rackt.org/redux/docs/recipes/WritingTests.htmlstore.dispatch(actions.fetchTodos()) ) で、store.dispatch が文字通り actions.fetchTodos を呼び出している場合、どのようにして fetch メソッドを呼び出さないのでしょうか?

これに似たものを実行しようとするたびに、フェッチが定義されていません。ノックを使っても。したがって、フェッチの呼び出しを受け取らないように、自分のアクションをスパイする必要があります。

これが私の単体テストです：

アクションは次のとおりです。

および fetch を呼び出す関数:

私がやっている方法がアクションをテストするだけの目的で十分かどうかはわかりませんが、store.dispatch が expectedActions の最初の要素のみを返すという問題に遭遇し、リストと等しくありませんスパイされた addPasswordResetRequest で提供します。以下は、スパイされたアクションを含みます。

最初の API ミドルウェアを作成したばかりで、複数のアクションをディスパッチするアクション クリエーターのプロミスをチェーンする場所を考えていました。私がやったことはアンチパターンです:

fetchAndSaveJoke は、react コンポーネントでセクション アクションをディスパッチする必要がありますか、それとも独自のアクション クリエーターとして使用しても問題ありませんか?

ドキュメントによると、「ミドルウェアがないと、Reduxストアは同期データフローのみをサポートします」 . なぜそうなのかわかりません。コンテナー コンポーネントが非同期 API を呼び出してdispatchからアクションを呼び出せないのはなぜですか?

たとえば、単純な UI (フィールドとボタン) を想像してください。ユーザーがボタンを押すと、フィールドにはリモート サーバーからのデータが入力されます。

エクスポートされたコンポーネントがレンダリングされると、ボタンをクリックすると入力が正しく更新されます。

Note the update function in the connect call. It dispatches an action that tells the App that it is updating, and then performs an async call. After the call finishes, the provided value is dispatched as a payload of another action.

What is wrong with this approach? Why would I want to use Redux Thunk or Redux Promise, as the documentation suggests?

EDIT: I searched the Redux repo for clues, and found that Action Creators were required to be pure functions in the past. For example, here's a user trying to provide a better explanation for async data flow:

The action creator itself is still a pure function, but the thunk function it returns doesn't need to be, and it can do our async calls

アクションの作成者は、もはや純粋である必要はありません。ということは、以前は必ず thunk/promise ミドルウェアが必要だったのですが、そうではなくなったということでしょうか。

問題: をthunk導入する前にミドルウェアを使用すると、サンクRedux.combineReducersにgetState渡された は正しいキーを持つオブジェクトを正しく返します。Redux.combineReducersuseにリファクタリングした後getState、サンクに渡された は、ネストされたキーを持つオブジェクトを返すようになりました。以下のコードを参照してください。これは (うまくいけば) 私の要点を示しています。thunkこれにより、状態にアクセスするメソッドの正しいキーを常に取得しなければならないという潜在的なメンテナンスの悪夢につながる可能性があります。

質問: 内で正しいコンテキスト キーを設定する簡単な方法はありますthunkか? レデューサーを組み合わせて正しい状態にアクセスするためにキーを挿入する必要があると、コードが脆く感じます。簡単なものがありませんか？

コードの前:

コードの後 (よりグローバルな appStore の導入):

Reduxコアでタイムトラベルをする方法はありますか? 私が見たところ、これはdevtoolsを使用してのみ利用可能であり、本番環境には推奨されていないようです. マルチプレイヤー ゲームで redux を使用して、クライアント サーバーの状態の調整を管理したいと考えていました。

thunk ミドルウェアを使って React に初期状態を渡しているのですが、他のリンクにアクセスすると React の状態が保存されないという問題があります。
ログインに成功すると、ダッシュボードが表示されるはずです。ユーザーがページに移動しようとすると
、ダッシュボード (ルート パス) にリダイレクトする必要があります。 //login

redux-router も使用する必要がありますか?

コードの一部を省略しましたが、ほぼ次のようになります。

init.js
ストアを Provider に渡しました

configureStore.js

initialState.js

App.jsx React に渡される初期アプリの状態props

ログイン.jsx

LoginContainer.jsx

LoginInput.jsx

loginActions.js

レデューサー/index.js

authReducer.js