見出し画像

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よりもフューチャーが多いですが、コード量やバンドルサイズも増えてしまいます。


参考: https://ics.media/entry/200409/

.