プログラミング

react-reduxの基礎

こんにちは、マクロロです!季節も巡り、もうすぐ夏がきますね。。

私自身も大学3年の前期が終わろうとしています。。21卒の就活もそろそろ始まるということで、周りの友達の様子も徐々に変わり始めていますね。。

私も引き続き頑張っていきます!それでは、本題に入ります!

テーマ

react-reduxとは

7月から、長期インターンで新しい会社のプロジェクトに参加することになったのですが、フロントでreact-reduxを使うそうで私も少し勉強する必要が出てきました。

そこで最近、基礎的なところからreduxを勉強しているので、少しアウトプットがてらに記事を書きます。

目次

❶reactとは

まずは、reactの簡単な説明から。

ご存知の方も多いと思いますが、今やweb業界のフロントエンドの流行の一つであるreact。viewをcomponentごとに作りそれらを複合させて一つのviewを作成していきます。

最近では、Atomicデザインという言葉も流行り初めていてViewをコンポーネント単位で設計していくことは当たり前になってきています。AtomicデザインとはAtomicつまり、原子のようにそれ以上分割できない単位でコンポーネントを作成することにより、柔軟にコンポーネントを扱えるようにしようという考え方です。

また仮装DOMと呼ばれる技術で、差異がある部分だけを描画することで従来のDOMを使用した場合と比べて速度が格段に早くなっていることも特徴です。

❷reduxとは

そして、本題のredux。Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。

Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してさらに扱いやすく設計されています。

reduxはよくreactと一緒に使用されることから、react専用のフレームワークだと思っている方もいらっしゃいますが、redux自体は単一のものでVueやAngularなどの他のフレームワークでも一緒に使うことができます。(reactが一番相性がいいと言われている)

一般的にreduxは理解するのが難しいと言われがちですが、考え方自体は順を追ってしっかり理解していけばそんなに難しいものではないと私は思いました。

❸reduxの特徴

続いてreduxの特徴。reduxはflaxという単一方向に状態変化を行なっていくフローを実現していく設計思想を元にしたフレームワークです。

stateの状態変化の管理に重きを置いているフレームワークです。また、reduxの3原則として以下のようなことが提唱されています。

  • Single source of truth
  • State is read-only
  • Changes are made with pure functions
  • まとめ
  • 1つ目が「Single source of truth」。これはアプケーション内でstateの管理は1箇所で行うとということ。

    2つ目が「State is read-only」。stateの状態変更はactionを生成してreducerを通してのみ許可するということ。

    そして、3つ目が「Changes are made with pure functions」。reducerはpureな関数つまり、引数にどのような値を渡しても必ず同じ戻り値を返すようにするということです。

    上記のような設計思想を取っていることにより、管理がしやすいコード状態を保つことができます。小規模なアプリケーションだと、reduxを使用することにあまり恩恵を感じることはできませんが、実際の仕事の大規模な開発だと、reduxの恩恵をより感じることができるようになります。

    どこでバグが起きたのかを検知したり機能を拡張する際など、変更箇所がより明確なので開発しやすくなる利点があります。

    ここで少し遅れましたが、reduxでの主な登場人物のご紹介。

  • Action Creater
  • Action
  • Dispatch
  • Store
  • めちゃめちゃ端的に紹介します。

    action creater

    actionを生成する関数

    action

    type属性と値を含んだオブジェクト

    reducer

    actionとstateを受け取って、actionのタイプに応じて新しいstateを生成する関数

    dispatch

    storeにactonを送信するもの

    store

    stateを保持する場所

    この記事ではreduxの雰囲気を大雑把に理解してもらうため、細かい定義などは他の記事で確認してみてください。

    最後に簡単なreduxのstateを変更するフローを見ていきましょう。

    上図がreduxでコンポーネントの状態を変化させる際の簡単なフローです。

    流れは簡単にこのような手順です。

    1. ユーザーのアクションでイベントが発火する(onclickなど)
    2. アクションクリエイターでアクションを生成する
    3. dispatchで生成したアクションをreducerに渡す
    4. actionと現在のstateを受け取ったreducerは新しいstateを生成する
    5. storeがその新しいstateを保持する
    6. viewのstateが更新されて新しい状態に変更される。

    上記が基礎的なreduxにおける状態変化の流れです。

    stateを更新するのに一見煩雑な手順を踏んでいるように見えますが、先ほども述べた保守と拡張の点でこのreduxのフローは開発を効率よく行うことを可能にしてくれます。

    まとめ

    今回はreduxについての基礎事項についてでした。

    まだまだ、勉強したばかりで基礎的なことしかわかっていない状況ですがこれからgoとreact-reduxを中心に勉強を進めて行こうと考えているので、アウトプットしていきたいと思います。

    また、これからのアプリケーションはフロントとサーバーサイドを分けて設計したりSPAが主流になっていきます。フロントの流行りに乗りたい方ははぜひ、reduxを勉強して見てください。

    Goでのクロージャ前のページ

    エンジニア学生の就職活動に関して次のページ

    関連記事

    1. プログラミング

      Saas, Paas, Iaasとは

      今回はクラウドの技術レイヤーで分けられるSaas, Paas, Ia…

    2. プログラミング

      Goの基本文法を覚えよう

      今後は、少しづつ技術系記事を増やして行こと思っています。変数…

    3. プログラミング

      【エンジニア】サービス開発とアルゴリズムは別物?

      こんにちはまくロロです。今回は「サービス開発とアルゴリズムは別物であ…

    4. プログラミング

      これから伸びる言語Golangを習得しよう。

      こんにちは、まくロロです。私は現在、主にrailsを使用した…

    5. プログラミング

      Railsでのデータ取得の基本

      今回はRailsでデータ取得しようということで、DBに保存されている…

    6. プログラミング

      Goでのクロージャ

      久しぶりの更新です。最近は就活関係で色々と忙しくブログの更新ができて…

    コメント

    1. この記事へのコメントはありません。

    1. この記事へのトラックバックはありません。

    最近の記事

    PAGE TOP