1. ホーム
  2. javascript

[解決済み] ReactアプリにReduxを追加するタイミングは?

2023-07-03 08:19:41

質問

私は現在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 のガイドに触発されましたので、それを読むことをお勧めします)