Reduxの概要 (original) (raw)

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( reducer );

Reducer

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

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

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

import { createStore } from "redux";

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

export default createStore( reducer );

State

状態のこと。

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

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

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

useSelector()でStateを取り出す。

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

import { useSelector } from "react-redux"

const state = useSelector(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

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 });
}