[解決済み] redux、react-redux、redux-thunkの違いは何ですか？

質問

React + Fluxを使用しています。私たちのチームは、fluxからreduxに移行することを計画しています。Reduxは、fluxの世界から来た私にとって、非常に分かりにくいです。で fluxの制御フローは から単純に コンポーネント -> アクション -> ストアとストア更新のバックコンポーネント . シンプルでとても分かりやすいですね。

しかし、reduxでは混乱します。ここではストアは存在しませんが、ストアを使わない例もあります。いくつかのチュートリアルを見てみましたが、実装のスタイルは人それぞれです。コンテナを使っているものもあれば、そうでないものもあります。(私はこのContainersの概念を知らないし、mapStateToPropsやmapDispatchToPropsが何をするのか理解できない）。

1. reduxで制御フローがどのように行われるか、誰か明確に説明してください。
2. reduxのコンポーネント、コンテナ、アクション、アクションクリエーター、ストアの役割は何ですか？
3. redux/react-redux/redux-thunk/その他の違いについて教えてください。
4. 他の言語へのリンクを貼っていただけると助かります。 シンプルで正確な redux チュートリアルのリンクを貼っていただけると助かります。

どのように解決するのですか？

1. reduxでどのように制御フローが行われるのか、誰か明確に説明してください。

Reduxは（常に）単一のストアを持ちます。

1. ストアの状態を入れ替えたいときは、必ずアクションをディスパッチします。

2. アクションは1つ以上のリデューサーによってキャッチされます。

3. リデューサは、古い状態とディスパッチされたアクションを組み合わせた新しい状態を作成します。

4. ストアサブスクライバーは新しいステートがあることを通知されます。

1. reduxにおけるコンポーネント/コンテナ/アクション/アクションクリエーター/ストアの役割は何ですか？

• ストア - 状態を保持し、新しいアクションが到着すると、ディスパッチ -> ミドルウェア -> リデューサーのパイプラインを実行し、状態が新しいものに置き換わったときにサブスクライバーに通知します。

• コンポーネント - 状態を直接意識しない、間抜けなビューパーツ。プレゼンテーショナル・コンポーネントとも呼ばれます。

• コンテナ - react-reduxを使用して状態を認識するビューの部分です。スマートコンポーネント、高次コンポーネントとも呼ばれる。

コンテナ/スマートコンポーネント対ダムコンポーネントは、アプリを構造化するための良い方法に過ぎないことに注意してください。

• アクション - フラックスと同じ - タイプとペイロードを持つコマンドパターン。

• アクションクリエイター - DRYな方法でアクションを作成します（厳密には必要ありません）。

1. redux/react-redux/redux-thunk/その他 の違いについて教えてください。

• リデュース - fluxはflowのように1つのストアで、vanilla js, react, angular 1/2など好きな環境で使用できます。

• react-redux - reduxとreactのバインディングです。このライブラリは react フック - useSelector() と useStore() でストアからデータを取得し useDispatch() でアクションをディスパッチします。また connect() 関数を使用して HoC (高次コンポーネント) を作成し、ストアの状態の変化を聞き、ラップされたコンポーネントのプロップを準備し、状態が変更されたときにラップされたコンポーネントを再レンダリングすることができます。

• redux-thunk - は、アクションの代わりに関数を返すアクションクリエイターを書くことができるミドルウェアです。サンクは、アクションのディスパッチを遅らせたり、特定の条件が満たされたときだけディスパッチするために使用することができます。主に、成功/失敗時に別のアクションをディスパッチするような、APIへの非同期呼び出しに使用されます。

1. 簡単で正確なreduxのチュートリアルのリンクを貼っていただけると助かります。 チュートリアルのリンクを貼っていただけると助かります。

• Reduxの公式ドキュメント

• Redux入門

• Idiomatic ReduxによるReactアプリケーションの構築

• プレゼンテーションとコンテナ・コンポーネント