ReduxとContext APIの違い
ここ数年、状態を管理するにはReduxが唯一の方法だった様子。
しかし、React 16.3では新しいContext APIが登場によって状況が変化。
この投稿は、既にReactの基本を学んでいて、状態を管理する方法を学び始めた人向けのメモです。
ReactのReduxとは?
Reduxは、グローバルな状態を管理するライブラリです。また、Reduxは状態を管理するための最もポピュラーなライブラリです。
しかし、Reduxを使う上でちょっとした問題があります。その問題とは…
React-Reduxのライブラリを接続する必要があります。
Reduxを扱う場合、いくつかのパッケージが必要になります。
・ React
・ Redux
・ React-Redux
ReactのContext APIとは何ですか?
Context APIとは、Reactアプリ内のコンポーネント間でデータを共有する方法で、データを更新する関数も共有できます。
ReduxとContext APIの主な違いは?
では、ReduxとContext APIの主な違いは何でしょうか?
いくつかの違いはありますが、Reduxの状態管理とuseReducerの状態管理の主な違いは、状態をグローバルな状態として管理するか、コンポーネントのスコープ内(ローカル)で管理するかです。
どのようなプロジェクトで使用するか
コンテキストAPI。リソースが豊富で、状態の変化が少ない小規模なアプリケーションに最適です。また、非同期処理もあまりありません。
Redux: 状態の更新が頻繁に行われる大規模なアプリケーションに最適。デバッグやロギングなど、グローバルな状態管理以外にも様々なフューチャーが必要。また、非同期処理との相性も良い。
Context APIの主な疑問点
Context APIの主な疑問点は次のようなものです。
頻繁に更新されるデータや変更されるデータでの使用は想定していない。
複雑なアプリケーションのメンテナンスは、特に標準的でないソリューションを使用した場合、困難になる可能性があります。
コンポーネントに渡されるデータやパラメータが不適切だと、React-Contextの外で再利用することが難しくなったり、不可能になったりします。
しかし、Context APIには良い点もあります。例えば、コンテキストを作成するだけなので使い勝手がよく、Reduxのように頻繁に更新されることもありません。また、Reactセグメントのドキュメントも充実しています。
まとめ
この記事を読んで、Redux、Context APIをどのような時に使うのかがわかったと思います。
ReduxはContext APIよりもフューチャーが多いですが、コード量やバンドルサイズも増えてしまいます。
.