今から学ぶReduxの基礎（概要編）

Reduxとは

一言で言うと、「state(状態)を管理をするためのライブラリ」となります。
しかし、これだけだと何も分からないので順を追って説明していきます。

状態管理とは

まず、状態管理とは何かを簡単に説明します。

例としてアプリケーションには、以下のような情報を保持する場合があります。

• ユーザーがログインしている
• チェックボックスがチェックされている
• モーダル が表示されている

これらの情報を「状態」と呼び、状態管理とはこれらの情報を管理するものです。

Reactで状態を管理する方法とReduxを使う理由

Reactで状態を管理する方法

Reactで状態を管理する方法として、以下のようなものがあります。

• 関数コンポーネントでReact HooksのuseStateを使用
• クラスコンポーネントを使用

useStateに関して、詳しくは以下を参照

https://qiita.com/seira/items/f063e262b1d57d7e78b4

これらはローカルステートと呼ばれています。

Reduxを使う理由

では、なぜReactで状態を管理する方法があるのにReduxを使うのか。

その理由として、コンポーネントを跨いで状態を共有したいと思った時にローカルステートでは以下の方法で状態を共有する必要があります。

1. 上位のコンポーネントに必要な状態を全て持たせる
2. 上位のコンポーネントから子、孫コンポーネント必要な情報バケツリレーしていく

しかし、この方法だと以下のような問題が発生します。

• どんどんコードが複雑化していく
• 親子関係のないコンポーネント間では状態を共有することができない

これらの解決策としてReduxを使うことができます。

Reduxで何ができるのか

Reduxを利用することで、コンポーネントの親子関係の有無に関わらず複数のコンポーネントからアクセスできるステート（グローバルステート）を作ることができます。

※ その他にも色々あるが、ここでは省略

Reduxの登場人物とデータフロー

Reduxを理解する上で避けては通れない言葉や概念を解説していきます。

登場人物

• Store

  • アプリケーションの全ての状態を保持するオブジェクト

  {
      value: 0,
  }
  

• Action

  • 「何が起きたのか」という情報を持ったオブジェクト
  • 以下の例では、deposit（入金）と入金金額を表したアクションを作成しています

  {
      type: 'deposit',
  	payload: 10
  }
  

• Action Creater

  • Actionを作成するメソッド
  • 毎回Actionを書くのは手間であり、typo時にバグの原因にもなるため指定されたActionを返すメソッドを作成する

  const deposit = (value) => {
  	return {
  		type: 'deposit',
  		payload: value
  	}
  }
  

• Reducer

  • stateとActionを受け取り、変更したstateを返す純粋関数（同じ引数を渡せば、毎回必ず同じ結果を返す関数）

  const reducer = (state = [], action) {
    switch (action.type) {
      case 'deposit':
        return { ...state, value: action.payload };
      default:
        return state;
    }
  }
  

• dispatch

  • 発送（する）、派遣（する）などの意味を持つ英単語
  • ActionをStoreに送る役目を担う
  • 以下の例では、ボタンがクリックされた時にdepositというActionをStoreに送る

  <button onClick={()=>{ dispatch(deposit()) }}>$10を入金</button>
  

データフロー

ここまでコードと文章でまとめましたが、なかなか理解しづらいので処理の流れを図で表したものを紹介します。

（引用元：https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow）

上の図はイベントによってUIに表示されている$0という状態を$10という状態に変更しています。

（UIと書いてある部分が普段私たちが見ている画面の表示部分です）

これをもとにstateが更新される流れを順に見ていきましょう。

1. クリック等のイベントが起きるとreducerに向けてActionをdispatch（送信）します
2. reducerは現在のstateとActionを受け取り、新しいstateを作成します
3. 最後にUIの表示変更をして終わりです

Reduxの三原則

Reduxは公式ドキュメントで以下の3つの原則を掲げています。

• Single source of truth（信頼できる唯一の情報源）
  • Reduxでは複数の状態を一元管理させることで、デバッグのしやすさを実現しています
• State in read-only（stateは読み取り専用にする）
  • 状態を直接変更するのではなく、actionを発行します
• Changes are made with pure functions（変更はすべて純粋関数で行われる）
  • 同じ引数を渡せば、毎回必ず同じ結果を返す関数で状態の変更を行います