【Redux】Reduxの基本と動作の仕組み、3原則（単一情報源、イミュータブル、純粋関数）

Reduxの概要

コンポーネントのサイズが大きくなった際や複数コンポーネント間で状態を管理や共有するために使用される2015年に公開された状態管理ライブラリです。

メリット

特定のコンポーネント配下にstateをおかないので、再レンダリングを防ぎパフォーマンスが上がる。

Reduxは特定のコンポーネント配下にあるわけでないStoreでstateを管理をします。Reactは、親コンポーネントで保持しているstateが更新されると子コンポーネントもレンダリングされるという性質を持っていますがそれを防げます。

テストが書きやすい。

Action CreatorやReducerなど純粋関数として書けるのでテストが書きやすい。

インストール

reduxのパッケージをインストールします。

Reduxの主な要素

概要図

State

Reduxアプリの状態を表しています。

Action

Stateの変更に関する情報を持ったオブジェクトです。状態変更はActionを介して行う必要があります。typeプロパティは必須でオプションでデータ(payload)を持ったプロパティ を持つことができる。

Reducer

受け取ったActionとその時点のStateから新しいStateを生成して返す関数です。純粋関数と呼ばれます。

Actionを使って状態変更させるにはReducerと呼ばれる関数にActionを送信する必要があります。

Action Creator

Actionを返す関数です。

Store

Stateを保持しているオブジェクトでReduxアプリに一つ存在します。createStoreを使って作られます。Storeは下記メソッドを持ちます。

dispatch(action)

State変更のためのActionをStoreに送付する。もし、非同期などの副作用のある処理を挟む場合はmiddlewareを使います。

getState()

State値の取得

subscribe(listener)

State変更時に呼ばれる関数を登録できます。

Reduxの動作の仕組み

stateで保持している状態を渡す。

• Reduxストアの状態を渡すためにコンテキストを使うのではなく、更新のチェックをするためにReduxストアへのサブスクリプションのためにコンテキストを使用する。
• 常に同じコンテキスト値を「<ReactReduxContext.Provider>」に渡している。

dispatchの動作

• アクションがディスパッチされるたびにReduxストアはすべてのサブスクライバーに通知コールバックを実行する。サブスクリプションはReduxストアのstateが更新される度に実行されるのでできるだけ高速である必要がある。

サブスクリプションのコールバックプロセス

• 完全にReactの外で行われる。

UIレイヤー

• 常に、Reduxストアにサブスクライブして最新のstateを読み取り値を差分してデータが更新されていたら再レンダリングを行う。(mapStateやuseSelectorの戻り値に基づいてReactは差分があれば再レンダリングを行う。)

三原則

第一原則(Single source of truth)

日本語に訳すと「単一情報源」です。アプリケーションの状態はただ一つのStoreで管理する(シングルトン設計)ということになります。

第二原則(State is read-only)

Stateを直接変更することはできません。Reducerを通じてのみ許可します。Stateを変更するためにはStoreのReducerに対してActionをdispatch（送付）します。

ちなみにこれをstateはイミュータブルになっていると表現をします。詳しくは下記の記事でも解説しています。

【Redux】イミュータブルとは？

第三原則(Changes are made with pure functions)

Stateの変更はReducerのpure functions(純粋関数)によって行われます。純粋関数とは引数にどのような値を与えても必ず同じ値を戻り値として返すということです。これを「Reducerは副作用がない」という呼び方をします。

純粋関数とは？

同じ引数を受け取ればいつ実行しても何度実行しても必ず同じ結果を返す関数のことです。

ReduxのReducerは純粋関数の思想が取り入れられています。

メリット

関数の再利用性や単体テストがしやすくなります。

ミュータブルとイミュータブル

JavaScriptのデータ型はミュータブルとイミュータブルに分かれます。

ミュータブル（変更可能）

変数同士を代入した場合に代入先のデータを変更すると代入元のデータまで値が変わります。

該当するデータ型

オブジェクト、配列、関数

イミュータブル（変更不可）

変数同士を代入した場合に代入先のデータを変更すると代入元のデータまで値が変わらないです。

該当するデータ型

文字列、数値、真偽値、null、undefined、シンボル

Reducerは現在の状態とアクションを利用して現在の状態に変更を加えることなく新しい状態を返します。この意味で純粋関数になります。

3原則があることでのメリット

データの流れが一方向になり複雑にならず、プログラムの流れが追いやすくなります。