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

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

ただいまの
回答率

90.51%

  • React.js

    1114questions

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

  • Redux

    152questions

Reduxの使い所について

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 785

yoppy0066

score 284

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/08 12:38

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

    キャンセル

  • 2018/03/08 12:51

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

    キャンセル

  • 2018/03/08 12:59

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

    キャンセル

  • 2018/03/14 12:41

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

    キャンセル

  • 2018/03/14 12:42

    ありがとうございます!

    キャンセル

+3

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 10:27

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

    キャンセル

同じタグがついた質問を見る

  • React.js

    1114questions

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

  • Redux

    152questions