質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

542閲覧

Reduxの使い所について

yoppy0066

総合スコア293

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

2クリップ

投稿2018/03/08 00:24

ここ1カ月くらいのんびりReduxについて調べています。いまいち使い所についてピンときません。

まず、前提として私がよく携わるシステムでは基本的に画面遷移のたびににAPIにリクエストしてデータを取ってきて画面に表示。データを編集してAPIへリクエストしてデータを更新。

こんな程度のものが多いです。ステートの管理といってもせいぜいログインユーザーの情報くらいしか思いつかないのですが、素直にReduxで実装すると、例えば画面ごとに表示する項目をステートで管理することになると思いますが、どうせまた同じ画面に戻ってくるときにはAPIから取得し直すため、メリットもあまり感じられません。

モバイルアプリを開発したときにはAPIへのリクエストを減らしたい場面もよくあってアプリ全体で整合性をとるためにそういうときには有用なのかなと思いました。

とても流行っているのでそんな単純な話でもない気もしているのですが解釈としてズレていますでしょうか?

gesorein👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Reactは親子間でしか値をやり取りできません。
DOMツリーの末端同士でのデータのやり取りが煩雑になります。

例えば左カラムで対象をクリックすると選択状態になって、右カラムに詳細データが表示されるだとか、
画面右上のコンフィグから値を弄ると、画面上のデータが更新されるとか…
画面内のアイテムをクリックすると、TOPに仕込んでおいた購入ダイアログが開いて、購入後前の画面に戻るとか…

なんでルートなのにひ孫からデータを吸い上げて、別の子供に流し込むだけの設定をひたすら書かなきゃいけないの…
まぁ、作り込めば作り込む程やり取りするデータ量が増えてプロジェクトはシッチャカメッチャカになります。
これを実現する為にcontext apiがありますが非推奨です。

Reduxというのはグローバル領域にstateというシングルトンのオブジェクトを1個ポンと作っておいて、各種要素がそれを元にpropを作成するという設計思想です。
関数型という所を強く意識しており、各モジュールが関数化されておりテストがしやすいです。
またコード量は多いものの、やれることが厳格にきまっているので、他人のコードも読みやすいですね。

投稿2018/03/08 03:28

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoppy0066

2018/03/08 03:38

なるほど、ありがとうございます。 仮にAPIから取得するデータによってストアに管理したいデータと管理したくないデータがあったとします。APIへリクエストするサンプルなどを見ていると、Storeへ保存する前提な気がするのですが、このあたり、APIのリクエストする方法を使いわけたりするものなのでしょうか?
miyabi-sun

2018/03/08 03:51

設計次第な所もあると思いますが、 Reduxを使うなら、いっそ親子のpropは捨ててしまって stateで全部の値を管理するような設計で統一した方が綺麗だと思います。
yoppy0066

2018/03/08 03:59

なるほど、仮にその画面でしか使わないような値であってもそこは統一してしまおうという解釈でよろしいでしょうか?
miyabi-sun

2018/03/14 03:41

遅くなりましたが、Reduxを決めたらそうするのが自然です。 機能が増えて、あれの値はReduxで管理するけど、こっちの値はPropsで…とやると収集つかなくなりますからね。 だからこその「Reduxが不要な内は無理に使わなくて良い」です。
yoppy0066

2018/03/14 03:42

ありがとうございます!
guest

0

reduxの開発者自身も言っていた記憶がありますが、reactだけで特に現状困っていないのであれば、reduxは使わないで良いと思います。

reactは上位のコンポーネントから下位のコンポーネントにpropsを通して下位のコンポーネントが必要とするデータを渡していきますが、階層が深い場合、これが煩わしくなってくると思います。

そういう場合、reactのcontext apiを使えば良い(context apiはアプデ予定)のですが、context apiはあくまで同じツリー構造の場合に上位のコンポーネントから中間コンポーネントを飛ばして下位のコンポーネントに下位コンポーネントが必要としているデータをcontextを通して渡せるものなので、異なるツリー構造にある下位コンポーネントに共通のデータを渡そうとした場合に、、、

いや、それもそうですが、というか、context apiが実験的なapiでライブラリ開発使用目的以外は非推薦と公式ドキュメントに書かれているので、context apiを開発してるアプリケーションで使いたいと感じる場面が出てきたらreduxの利用を検討する一つのタイミングなのかもしれません。reduxは内部でreactのcontext apiを使っているので、今進行中のcontext apiのアプデもredux側で吸収してくれるかたちになりますね。
開発中のreact16.3にnew context apiが取り込まれる予定。

reactのcontext apiは今alphaで公開されてますが、これが本リリースになると、reduxを使わなくても同じことを異なるかたちで出来るようになるのかもしれません。new context apiをちゃんとまだ理解してないので、なんとも言えませんが。もちろん、reduxにはmiddlewareの仕組みなどもあるので、プラスアルファの部分はnew context apiに対してあります。

投稿2018/03/08 01:27

編集2018/03/08 02:23
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HayatoKamono

2018/03/08 01:27

スマホから書いたのでグダグダになりました。すみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問