Reactでの、react-reduxとuseContextの併用について。

Question

プログラム歴1年半です。
現在の見解が正しいか不安で手が進まなくなってしまったので質問させていただくことにしました。

##【現在の見解】
###react-redux：アプリケーション全体で共有される状態や値を管理。ログインしているか、メインページに表示する取得したデータ（amazonでいう商品リストなど）、カート...

useContext：バケツリレーを回避するために使用。親コンポーネントでstate（useState）を管理し、その値と値を更新する関数（setState）を孫コンポーネントで使用するなどの場合は、子要素はただpropsを受け取り、孫コンポーネントに渡す役割になってしまうので、useContextを利用しそういったバケツリレーを回避する。

以上の見解でコーディングをしているのですが、現在react-reduxを使用しており、親コンポーネントで管理しているstate（useState）とそれを更新する関数を複数（10個以上渡したいです）孫要素以下に渡したいです。

バケツリレーにより、ソースコードが汚くなってしまうと思い、useContextを使い回避しようと思うのですが、このようなstateはグローバルなstateなのではないかと思い、reduxでの管理すべきか悩んでいます。

しかし、reduxはアプリケーション全体で管理する値や状態を管理するものと思っています。そのため今回のケースは複数のコンポーネントで使用するとはいえ、アプリケーション全体で管理するものではないので、reduxでの管理も違和感があります。

どちらを使用すべきでしょうか。個人的にはuseContextで解決すべきだと思うのですが、react-reduxとusecontextを共有するケースがあるのか、適しているのか不安です。

ご教授いただければ幸いです。
よろしくお願いいたします。

Comments

[hoshi-takanori]

Redux と Context はほぼ同じ目的で使われるものと理解してますので、Redux だけで良いのでは。また、Redux は冗長になりがちなので Hooks や Redux Toolkit (および TypeScript) との併用をお勧めします。

[kanabunhalosaka]

スッキリしました。hooks、redux　toolkit、typescript、チェックしようと思います。ありがとうございました。

Answer 1

あくまで個人的な見解ですが、、

Reduxを入れるならアプリケーション全体がfluxフレームワークに乗っかるべきで、状態管理を場所によって色んなやり方でやるのは良くないと思うので、併用はないかなぁ、と。あらゆる状態が一元管理されてる事に意味があるモノだと思ってます。そのために入れるモノだ、とも。

Reduxはフレームワークの厳格なルールに縛られる事自体が一つのハードルですが、面倒でも全部ルールに乗っかる事で、各コンポーネントが全部同じような構造になるのが良いところ、と個人的に思ってます。まぁフレームワーク使った開発、って感じですね。

なので、すでにreact-reduxを導入されているなら、自分なら些細な内容も全てReduxのAction経由にするように作ります。

※ただ、おっしゃられている「今回のケースは・・・アプリ全体で管理するものではない」というところのポリシーがしっかり定義されていて、関係者の誰が判断してもReduxとそれ以外で管理すべきモノの判断に迷わないルールがある（または作れる）、と言えるなら、個別に判断してもいいんじゃないでしょうか。

Comments

[kanabunhalosaka]

とてもすっきりしました。reduxで管理しようと思います。ありがとうございました。