React Reduxの概要

2022年9月16日2022年12月23日

※読みやすさ重視でRedux Essentials, Part 1: Redux Overview and Concepts | Reduxをところどころ意訳

概要

• ReduxのReact向けライブラリ
  • ReduxとはJavascriptアプリのPredictable state container
    • ここでいうPredictableの意味は、「コードを読んで何がしたいか予測できる」であると思われる（Predictable Code | Coding With Sam）
  • グローバルな状態管理を行う場所を作り、コードの可読性を上げるためのもの
  • Immutability（調査中）
    • https://redux-toolkit.js.org/usage/immer-reducers#immutability-and-redux

重要な概念

1. Actions
   • typeというフィールドを持つJavascriptのオブジェクト（以降、actionオブジェクト）
     • typeフィールドの値は"domain/eventName"の形式の文字列を設定する
       （例）const addTodoAvtion = {type: "todos/todoAdded", payload: ""}
   • アプリで起こるイベント
   • 基本的に次のAction Creatorsを使うため、actionオブジェクトを変数定義することはない
2. Action Creators
   • actionオブジェクトを返す関数
3. Reducers
   • 現在のstateとactionオブジェクトを受け取り、stateを更新、新しいstateを返す関数
   • 受け取ったactionオブジェクトに基づいてイベントを起こすイベントリスナー的な役割
   • ルール
     • 新しいstateが何かを計算するのみの機能を持つ
     • 現在のstateの値を変更しない（現在のstateの値をコピーして使うのは可）
     • 基本的に下記の形で使う。非同期処理、ランダム数を扱うなど、ややこしいことをしない。
       const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
// Check to see if the reducer cares about this action
if (action.type === 'counter/increment') {
// If so, make a copy of state
return {
...state,
// and update the copy with the new value
value: state.value + 1
}
}
// otherwise return the existing state unchanged
return state
}
4. Store
   • stateを含むオブジェクト
   • configureStoreモジュールをimportして、Reducerを設定する
     import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: counterReducer })
5. Dispatch
   • Storeオブジェクトのメソッド
   • state変更時したいときはDispatchを呼び出す（イベントトリガー的な役割）
     • actionオブジェクトのtypeを渡すことで、Reducerを起動する
       例：store.dispatch({ type: 'counter/increment' })
6. Selectors
   • stateオブジェクトの特定の値を取得する関数（どの値を取得するかを関数宣言時に記述する）
     例：const selectCounterValue = state => state.value
     • 上記の場合、下記のように呼び出す
       currentValue = selectCounterValue(store.getState())

その他の専門用語（調査中）

• Thunk
• Slice

ReduxのData flow

• 初期セットアップ
  • rootとなるReducerでStoreを作成
  • StoreがReducerを呼び、初期stateを保存
  • UIが描画されるとき、UIコンポーネントはStoreのstateに応じてレンダリングされる
  • UIはstateの変化に応じるようにしておく
• state更新
  • stateが変化する動作（ボタンクリック等）があったとき、Storeに対して該当のActionsをDispatchする
    例：dispatch({type: 'counter/increment'})
  • StoreはReducerを実行し、新しいstateを取得・UIへ通知
  • UIはstateに応じて再レンダリングされる