Reduxの基礎のキソ【図でイメージ】

アウトプット背景

• Reduxを勉強中、React だけでもstateを使えば状態を管理できるのに、なぜRedux（＝別ライブラリ）が必要なのかわからなくなった背景があったので、アウトプット。
• 今回は概念が中心（追って追記予定）

Reduxとは

• Redux とは、フロントエンドにおける状態管理に特化したライブラリ。

Reduxを必要とする場面

• 状態管理が複雑な場面
  • 小規模なアプリケーションであればもちろん一つの state でも十分に管理することができる。
  • しかし、大きなアプリケーションになると、コンポーネントツリーは肥大化し、状態管理が複雑になる。

状態管理が複雑になると？

1. バグのきっかけ
   • 親コンポーネントで状態を一限管理しようとすると、大きな state になってしまい、「状態の更新や取得」が複雑になりバグのきっかけとなる。
2. 単純に管理が面倒
   • バケツリレーがいたるところで起こってしまうのも管理が大変になり問題にもなる。
3. 情報の伝達が困難
   • それぞれのコンポーネントで独自の state を持ってしまうと、他のコンポーネントにその状態を知らせるのが難しくなり複雑化してしまう。

Reduxを使うことで状態を分離

• Reduxを使うことで状態管理にかかる部分をコンポーネントのツリーから分離することが可能。
• また、複雑なバケツリレーから解放（完全に解放されるわけではないが負荷は減る）やコンポネート間の状態のやりとりが可能となる。 from https://css-tricks.com/learning-react-redux/

Redux の特徴

• 概念：redux は flux という概念に基づいて設計
• flux の2つの特徴
  1. 「一方向に状態が流れる」というという特徴を持っている。
  2. また、「値を直接変更しない」という関数型の特徴も併せ持っている。

Redux の登場人物

Store

• Storeはアプリケーションの状態(state)を保持している場所。
• コードで直接的に記述する部分はほとんどない
• Redux の状態そのものは Store と呼ばれるオブジェクト。この中に各 Reducer に対応した State がネストして入っている。
• StoreはReducer を介してしか変更できない
• StoreはstateにgetStateメソッドを通していつでもアクセス可能。

Javascript

console.log(store.getState())

Action type

• Reducer や middlwareがどの処理を行うかを判断するために使用。
• 直接値を変更できないのでこのような方法が取られる。定数や typescript であれば enum で定義されることが多いらしい。（自分自身Typescript・enumはまだ勉強範囲外なのでメモとして記載）

Javascript

const ACTION_TYPE = "ACTION_TYPE";

ActionCreator

• Actionを作成するメソッド。
• FluxのActionCreatorとは異なり、Actionを作るのみを行いStoreへのdispatchは行わない。

Action

• ActionはStoreに向かって「何をする」という情報を持ったオブジェクト（関数）。
• Actionをdispatch（＝ Redux に通知）を検知すると，「Stateの番人（＝Reducer）」が更新しReduxのフローが実行
• Actionはtypeプロパティを必ず持つ必要がある。

Javascript

{
    type: "アクションの種類を識別できる文字列またはシンボル",
    payload: "アクションの実行に必要なデータ（引数）",
}

Reducer

• payload と直前の state を受け取って次の state を返す関数。
• Reducer は Store に登録された関数
• Redux における関数は Reducer を介さないと更新できない仕組みになっている。
• どのように状態を更新するかは Action type で条件分岐をするのが一般的。

Javascript

{
const reducer = (state = initState, { type, payload }) => {
  switch (type) {
    case ACTION_TYPE:
      return newState(payload);
    default:
      return state;
  }
};

次回以降

• 概念をが中心で記載したので、次は具体的な処理内容も追記していく。
• React-reduxについても追記予定