【概要】Reduxを始める

 

 

 

概要

  • UIの状態管理を行うライブラリ

    • 状態：ログイン済、未ログインとか

  • Fluxの概念を拡張して作成

  • 中規模～大規模アプリに向いている

 

基本構成

  • 基本は以下の３つ

    • State：状態

    • View：画面

    • Actions：イベント

  • データフロー

    • 初期状態のState（状態）に基づいてView（画面）が表示される

    • ViewからActions（ボタン押下等）が実行される

    • Actionの種類に基づいてStateが更新される

    • 更新されたStateに基づいてViewが更新される

f:id:kanmi-program:20201120223746p:plain



 

 

データフロー詳細

  1. ユーザー入力からActionを作成

  2. StoreへActionをdispatch（送信）

  3. dispatchされたActionとStateをReducerへ渡す

  4. Reducerが作成した新しいStateをStoreが保存

f:id:kanmi-program:20201120224717g:plain

 

 

Reduxの3原則

 

1. Single source of truth

  • アプリ内でStoreは１つのみ

  • Global Stateは単独のオブジェクトとしてStoreに保存

    • どこからでも同じものが取得できる

 

2. State is read-only

  • Stateを直接変更しない

  • Stateの変更はActionをStoreへdispatchする方法のみ

    • 状態の変更が一元化されることで競合が起きない

 

3. Mutations are written as pure functions

  • Reducerは純粋関数にする

    • 関数の実行に副作用無し

    • 関数の戻り値は入力パラメータ(State、Action)のみに依存(参照透過性)

    • 非同期処理やランダム値の計算はしない

  • 既存のStateオブジェクトを更新ではなく、新規にStateオブジェクトを作成する

 

 

用語集（Redux）

Action

  • 「状態を変更する」という情報を持ったオブジェクト

  • typeプロパティ（定数）を必ず持つ

  • typeプロパティの命名規則は「domain/eventName」

    • domain：アクションが属する機能またはカテゴリ

    • eventName：発生した特定のイベント

 

ActionCreator

  • Actionを作成するメソッド

  • Actionを作るのみ

 

Store

  • State（状態）を保管している場所

  • アプリ内で１つだけ存在

  • Storeの機能は以下

    • Stateの保持

    • Stateへのアクセス機能(getState)

    • Stateの更新機能(dispatch)

    • リスナーの登録機能(subscribe)

 

Dispatch

  • Stateを更新する機能

    • StoreにActionを送信し、新規のStateを作成してStoreのStateを更新

 

State

  • アプリの状態

 

Reducer

  • ActionとStateを受け取り、新しいStateを返すメソッド

  • 純粋関数として作る