More than 1 year has passed since last update.

ＡＲアドバンストテクノロジ株式会社（ARI）

Django+Reactで学ぶプログラミング基礎(29): Reduxチュートリアル(構成要素とデータフローの概要)

Last updated at 2022-06-18Posted at 2022-06-18

[前回] Django+Reactで学ぶプログラミング基礎(28): Reduxチュートリアル(準備と概要)

はじめに

前回は、チュートリアルの概要と、なぜReduxが必要か、
を勉強しました。
今回は、Reduxアプリの構成要素と、データフローの概要を、
サンプルを通して理解します。

今回の内容

Reduxの基本

Reduxアプリの構成要素
Reduxアプリのデータフロー
Reduxコアをサンプルアプリで理解

Reduxアプリの構成要素

※ 引用元: Reduxアプリを介したデータフロー

Store
- すべてのReduxアプリの中心
- アプリのグローバル状態を保持するコンテナ
- いくつかの特別な機能を備えたJavaScriptオブジェクト
State/View(UI)/Reducer/Actions
- State
  - アプリの状態を保持する唯一の手段
  - 特定時点のアプリ状態を表す
- View
  - 現在の状態に基づく、UIの宣言型説明
  - UIは状態に基づきレンダリングされる
- Reducer
  - storeで、reducer関数を実行し、新しいstateを計算
- Actions
  - アプリで、ユーザー入力による、発生イベントおよび状態更新のトリガー
  - ユーザーがボタンをクリックするなどアクションを起こすと
    - stateが、発生内容に基づき更新される
    - UI(view)は、新しい状態を読み取り、再レンダリングされる
    - actionが、storeにdispatchされる
    - storeが、reducer関数で新しいstateを計算

Reduxアプリのデータフロー

UIをクリックし、イベント発生
ActionがStoreにDispatchされる
ReducerがStateを計算し、その結果によりUIが更新される

※ 引用元: Reduxアプリを介したデータフロー

アプリでアクションが発生したら
- 発生イベントを表すプレーン(plain)なactionオブジェクトを作成
  - actionをstoreにdispatchし、何が発生したか通知
    - storeはroot reducer関数を実行し、古いstateとactionに基づき、新しいstateを計算
      - storeはsubscriberにstateが更新されたことを通知
        
        view(UI)が、subscriberにより新しいデータで更新される
上述フローが、storeに保持されているstateを変更する唯一の方法
- ※ storeに保持されたstateを直接変更してはいけない

Reduxコアをサンプルアプリで理解

環境準備

Redux開発環境の構築
React-Reduxアプリを作成
VS Codeで、ファイルメニューからフォルダーを開く...
- 上記作成したアプリのフォルダーを指定

アプリコード作成

srcフォルダーに新規ファイルindex.htmlを追加

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Redux basic example</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </head>
  <body>
    <div>
      <p>
        Clicked: <span id="value">0</span> times
        <button id="increment">+</button>
        <button id="decrement">-</button>
        <button id="incrementIfOdd">Increment if odd</button>
        <button id="incrementAsync">Increment async</button>
      </p>
    </div>
    <script>
      // Define an initial state value for the app
      const initialState = {
        value: 0
      };

      // Create a "reducer" function that determines what the new state
      // should be when something happens in the app
      function counterReducer(state = initialState, action) {
        // Reducers usually look at the type of action that happened
        // to decide how to update the state
        switch (action.type) {
          case "counter/incremented":
            return { ...state, value: state.value + 1 };
          case "counter/decremented":
            return { ...state, value: state.value - 1 };
          default:
            // If the reducer doesn't care about this action type,
            // return the existing state unchanged
            return state;
        }
      }

      // Create a new Redux store with the `createStore` function,
      // and use the `counterReducer` for the update logic
      const store = Redux.createStore(counterReducer);

      // Our "user interface" is some text in a single HTML element
      const valueEl = document.getElementById("value");

      // Whenever the store state changes, update the UI by
      // reading the latest store state and showing new data
      function render() {
        const state = store.getState();
        valueEl.innerHTML = state.value.toString();
      }

      // Update the UI with the initial data
      render();
      // And subscribe to redraw whenever the data changes in the future
      store.subscribe(render);

      // Handle user inputs by "dispatching" action objects,
      // which should describe "what happened" in the app
      document
        .getElementById("increment")
        .addEventListener("click", function () {
          store.dispatch({ type: "counter/incremented" });
        });

      document
        .getElementById("decrement")
        .addEventListener("click", function () {
          store.dispatch({ type: "counter/decremented" });
        });

      document
        .getElementById("incrementIfOdd")
        .addEventListener("click", function () {
          // We can write logic to decide what to do based on the state
          if (store.getState().value % 2 !== 0) {
            store.dispatch({ type: "counter/incremented" });
          }
        });

      document
        .getElementById("incrementAsync")
        .addEventListener("click", function () {
          // We can also write async logic that interacts with the store
          setTimeout(function () {
            store.dispatch({ type: "counter/incremented" });
          }, 1000);
        });
    </script>
  </body>
</html>

ブラウザで、カウンターアプリを使ってみる

F5を押してアプリを実行
- デバッガーとしてWeb App(Chrome)を選択
ブラウザで、以下ボタンでさまざまなカウント操作を行ってみる
- +をクリック: 1増やす
- -をクリック: 1減らす
- Increment if oddをクリック: 奇数時のみ増やす
- Increment asyncをクリック: 1秒遅延と伴う非同期加算

コード説明

State/Actions/Reducers

まず、カウンターの状態を表すstateの初期値を定義
- Reduxアプリでstateの構成
  - stateのroot部分として、JSオブジェクトを持つ
    - サンプルでは、initialState
    - そのJSオブジェクト内に他の値が含まれる

src/index.html

// Define an initial state value for the app
const initialState = {
  value: 0
}

次に、reducer関数を定義
- reducerは、二つの引数を受け取る
  - state: 現在の状態を表す
  - action: 何が起こったかを示す
- Reduxアプリ起動時、まだstateがないため
  - reducerのデフォルト値としてinitialStateを指定
- actionオブジェクトのtypeフィールド
  - actionの一意の名前を表すため、意味が分かりやすい名前に
    - 例えば、カウンターを増やすactionのtype
      - counter/incrementedと記述
  - actionのtypeに基づいて、返却されるstateが異なる
    - stateが変更された場合、新しいstateオブジェクトを返す
    - stateが変更されていない場合、既存のstateオブジェクトを返す
      - ※ stateは、イミュータブルに更新
        
        元のstateオブジェクトを直接変更せず、既存のstateをコピーしそれを更新

src/index.html

// Create a "reducer" function that determines what the new state
// should be when something happens in the app
function counterReducer(state = initialState, action) {
  // Reducers usually look at the type of action that happened
  // to decide how to update the state
  switch (action.type) {
    case 'counter/incremented':
      return { ...state, value: state.value + 1 }
    case 'counter/decremented':
      return { ...state, value: state.value - 1 }
    default:
      // If the reducer doesn't care about this action type,
      // return the existing state unchanged
      return state
  }
}

store

ReduxライブラリのcreateStoreAPIを呼び出し、storeインスタンスを作成
- reducer関数をcreateStoreに渡す
- createStoreはreducer関数を使用し
  - 初期値を持つstateを生成
  - 将来更新時、stateを計算

src/index.html

// Create a new Redux store with the `createStore` function,
// and use the `counterReducer` for the update logic
const store = Redux.createStore(counterReducer)

view(UI)

UIは、画面に既存のstateを表示
- ユーザーがアクションを起こすと
  - アプリはそのデータを更新してから、新しい値でUIを再レンダリング
- store.getState()メソッドを使用し、storeから最新stateを取得
  - その値を用いてUIを更新/表示
- store.subscribe()メソッドを呼び出し、storeが更新されるたびに呼び出されるsubscriberコールバック関数を渡す
  - サンプルでは、render関数をsubscriberとして渡している
    - storeが更新されるたびに、UIを最新の値で更新可能
- Redux自体は、どこでも使用できるスタンドアロンのライブラリ
  - 任意のUIレイヤーでReduxを使用可能

src/index.html

// Our "user interface" is some text in a single HTML element
const valueEl = document.getElementById('value')

// Whenever the store state changes, update the UI by
// reading the latest store state and showing new data
function render() {
  const state = store.getState()
  valueEl.innerHTML = state.value.toString()
}

// Update the UI with the initial data
render()
// And subscribe to redraw whenever the data changes in the future
store.subscribe(render)

actionをdispatch

actionオブジェクトを作成し、storeにdispatchすることで、ユーザー入力に応答
- store.dispatch(action)を呼び出すと
  - storeはreducerを実行し、更新後のstateを計算
  - subscriberを実行し、UIを更新
- サンプルでは、以下のような複数パターンでactionをdispatchし、reducerに計算させる
  - 現在のカウンター値から加算または減算
  - カウンター値が奇数の場合のみ加算
  - 1秒遅延後に非同期に加算

src/index.html

// Handle user inputs by "dispatching" action objects,
// which should describe "what happened" in the app
document.getElementById('increment').addEventListener('click', function () {
  store.dispatch({ type: 'counter/incremented' })
})

document.getElementById('decrement').addEventListener('click', function () {
  store.dispatch({ type: 'counter/decremented' })
})

document
  .getElementById('incrementIfOdd')
  .addEventListener('click', function () {
    // We can write logic to decide what to do based on the state
    if (store.getState().value % 2 !== 0) {
      store.dispatch({ type: 'counter/incremented' })
    }
  })

document
  .getElementById('incrementAsync')
  .addEventListener('click', function () {
    // We can also write async logic that interacts with the store
    setTimeout(function () {
      store.dispatch({ type: 'counter/incremented' })
    }, 1000)
  })

おわりに

Reduxアプリの構成要素とデータフローを、
サンプルを通じて勉強しました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(30): Reduxチュートリアル(概念とデータフローの詳細)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up