[解決済み] ReactアプリにReduxを追加するタイミングは?
質問
私は現在Reactを学んでおり、モバイルアプリを構築するためにReduxとどのように使用するかを理解しようとしています。この 2 つがどのように関連し、一緒に使用できるのかについて、ちょっと混乱しています。たとえば、私は React で次のチュートリアルを完了しました。 https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript でこのチュートリアルを完了しましたが、今度はそのアプリにいくつかのリデューサー/アクションを追加して遊んでみたいのですが、それらが私がすでに行ったこととどこで結びつくのかがわかりません。
どのように解決するのですか?
React は、通常、何らかのコンポーネントが「所有する」状態として記述される「真実の源」に応答して UI を更新することを引き受ける UI フレームワークです。 Reactで考える は、Reactの状態所有の概念について非常によく説明しているので、それに目を通すことを強くお勧めします。
この状態所有モデルは、状態が階層的で、多かれ少なかれコンポーネント構造に一致する場合にうまく機能します。この方法では、状態は多くのコンポーネントに「分散」され、アプリは理解しやすくなります。
しかし、アプリの離れた部分から同じ状態にアクセスしたいこともあります。たとえば、取得したデータをキャッシュし、同時にあらゆる場所で一貫して更新したい場合などです。この場合、React モデルに従うと、コンポーネント ツリーの最上部に非常に大きなコンポーネントの束ができ、そのデータを実際に気にするいくつかのリーフ コンポーネントに到達するために、それらを使用しない中間コンポーネントを経由して無数の props を渡すことになります。
このような状況に陥ったとき、あなたは ができます。 (は、Redux を使ってトップレベルのコンポーネントからこの状態管理ロジックを「reducers」という別の関数に「抽出」し、その状態を気にするリーフコンポーネントを、アプリ全体に prop を渡す代わりにそれに直接「接続」します(ただし、その必要はありません)。まだこの問題がないのであれば、おそらくReduxは必要ないでしょう。
最後に、Reduxはこの問題に対する決定的な解決策ではないことに注意してください。Reactコンポーネント以外でローカルの状態を管理する方法は他にもたくさんあります。たとえば、Reduxが好きでなかった人のなかには MobX . まずはReactの状態モデルをしっかり理解した上で、さまざまなソリューションを独自に評価し、それらを使って小さなアプリを作り、その長所と短所を把握することをお勧めします。
(この回答はPete Huntの react-howto のガイドに触発されましたので、それを読むことをお勧めします)
関連
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reduxのアクションをタイムアウトでディスパッチする方法とは?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行