okinawa

IT勉強メモ

Reduxの概要

React

Reduxとは

状態を管理するライブラリ。

アプリケーション全体で状態を管理できるため、propsで渡す手間が省ける。

propsのバケツリレーを回避できる。

React以外でも使える。

参考サイト

www.udemy.com

redux.js.org

qiita.com

素のReduxコードと公式画像を照らし合わせて理解する

素のReduxは非推奨。

実運用では、Redux tool kitを使うこと。

公式画像と照らし合わせながら見て理解を深めたい。

ファイルサイズ大きくて公式GIFを貼れなかったので下記を参照↓
Redux Fundamentals, Part 2: Concepts and Data Flow | Redux

Reduxデータフロー図

最初にまとめ

  1. ボタンクリック（EventHandler起動）
  2. dispatch(action{type:~, payload:~})でActionをReducerに送信
  3. typeを元にどのReducerを起動するか識別
  4. Reducerがpayloadを使ってStateを更新
  5. StateがUIに反映される

Store

状態を保管しておく場所。

StoreはStateとReducerを持つ。

createStore(Reducer);でStore全体を生成。

import { createStore } from "redux";

const initialState = 0;
const reducer; //省略

export default createStore( // ここでStore生成
    reducer
);

Reducer

Reducerとはstateをどのように更新するか定義した関数。

createStore(Reducer);で引数にReducerを渡す。

そうするとStoreの中にReducerが作られる。Reducerは複数生成可能。

import { createStore } from "redux";

const initialState = 0;
const reducer = (state = initialState, { type, payload }) => { //Reducerを定義
    switch (type) {
      case "+":
        return state + payload ;
      case "-":
        return state - payload ;
      default:
        return state;
    }
  };

export default createStore( // ここでStore生成
    reducer
);

State

状態のこと。

状態とはWebアプリだと、ログイン状態やカート内商品の個数など。

StateはReducerと同じ数作られる。

Reduxは、このStateを管理するためのライブラリ。

useSelector()でStateを取り出す。

Stateが更新されると画面が再描画される。

import { useSelector } from "react-redux"

const state = useSelector(state => state);//Stateの取得

UI

関数コンポーネントのこと。

useSlector();で更新後のStateを取得する。

Stateが更新されると、画面が再レンダリングされる。

Action

名前はActionだけど何のActionもしない。

Reducerの識別子である「tpye」と「payload(Stateの素）」を持つオブジェクト。

type識別子でReducer関数を特定　→　payloadの値を使ってReducerがStateを更新する、という流れ。

ActionはDisptchの引数として、Reducerに渡される、Actionを元に実際にアクションするのはReducer。

import { useDispatch } from "react-redux";

    const dispatch = useDispatch();

    const eventHandler = () => {
        dispatch({ type: "+", payload: 1 });
// type(+ or -)でReducerのswitch文の分岐を判定。
// paylod（数値）を元にRducerがStateを更新。足し算引き算。
// typeとpayloadが含まれたオブジェクトをActionオブジェクトと言う
    }

type

Reducerを識別するための名前みたいなもの。

Reducerには1個1個この識別子が付いてる。

payload

本来の意味は

  • 有料荷重（貨物のうちの有料ブ部分）
  • 乗客と貨物の最大積載量

IT用語では、本来のデータ部分のこと。

HTTPで言うと、ヘッダデータなどの付加情報をを除いたボディ部分。

APIとの通信の場合、payloadにレスポンスデータが入ってくる。

太字部分↓
http://www.google.com?name="yamada"

ReduxではActionにpaylodが含まれていて、dispatch(action);でReducerを呼び出し、Reducerにpayloadが渡される。

Dispatch

ReducerにActionを渡して、Reducerを呼び出す関数。ここがスタート。

const dispatch = useDispatch();で生成。

dispatch(action);でdispatchの引数にAcitonオブジェクトを渡して実行する。

import { useDispatch } from "react-redux";

const CounterButton = ({type, payload}) => {

    const dispatch = useDispatch();

    const eventHandler = () => {
        dispatch({ type, payload });
    }

EventHandler

そのまま。

何らかのEventと紐付ける。ボタンクリックなど。

import { useDispatch } from "react-redux";

    const eventHandler = () => {
        dispatch({ type, payload });
    }

StoreとEventHandlerの繋ぎ

Dispatchの引数にActionオブジェクトを渡して繋ぐ。

ActionオブジェクトにはReducerの識別子であるtypeプロパティがある。

typeプロパティの値でReducerと紐付ける。

import { useDispatch } from "react-redux";

    const eventHandler = () => {
        dispatch({ type, payload });//これ
    }