Tyotto good!

Redux入門 : Reduxの概念と使い方を学ぼう

Posted: September 07, 2020

Reduxとは?

Reduxとは、「Action」と呼ばれるイベントを使用してアプリケーションの状態を管理するライブラリです。React.jsを用いる場合は、stateを管理することになります。

Reduxのメリットは?

では、なぜReduxをわざわざ用いるのでしょうか。
ReduxはReactの単純なstate管理と異なり、**グローバル(複数のコンポーネント間)**での状態(state)管理を行うことができるからです。
また、Reduxが提供するパターンやツールを使用することで、アプリケーションの状態(state)が、いつ・どこで、なぜ、そしてどのようにして更新したか、また状態(state)が更新した時のロジックを簡単に理解することができます。

Reduxのデータフロー

Reduxのstate管理の流れを見ていきましょう!全体的な流れは以下のようになります。


Todoリストを例にとり、1つ1つ掘り下げて見てみましょう。

Action

ユーザの操作により、コンポーネントのstateが変わったと想定しましょう。Reduxでは、stateが変わったらActionを発行します。
Actiontype プロパティを持つJavaScriptのオブジェクトで、「何をするのか」といった情報をもつ必要があります。
type プロパティはActionの内容を説明する文字列である必要があり、ドメイン/イベント名 のような命名規則にするのがよいです。

  • ドメイン : Actionが属するカテゴリ
  • イベント : 「何をするのか」を表す文字列

また、Actionオブジェクトにはtype プロパティに関する追加情報を別のプロパティで定義できます。慣例で、payloadというプロパティを利用します。

const addTodoAction = {
	type: 'todo/todoAdded',
	payload: '部屋を掃除する'
}

ActionCreator

ActionCreatorActionを作成する関数です。通常はこちらを利用するので、Actionオブジェクトを毎回手動で生成する必要はありません。

const addTodo = content => {
	return {
		type: 'todo/todoAdded',
		payload: content
	}
}

Dispatch

ActionCreatorで生成されたActionを呼び出してStoreに渡します。Dispatchは状態を更新する唯一の方法で、store.dispatch() の引数にActionCreatorを入れることで実行できます。

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: todoReducer })

store.dispatch(addTodo('洗濯する'))

Reducer

Reducerは、stateActionオブジェクトを受け取り、stateを更新する必要があれば、(state, action) => newState の形式で新しいstateを返します。これにより、Storeのstateが更新されます
また、Reducerは以下のルールに従う必要があります。

  1. 前のstateとactionオブジェクトに基づいて新しいstateのみを計算する必要がある
  2. 既存のstateを変更してはいけない。代わりにstateをコピーして新しいstateを生成する
  3. 非同期処理をしたり、ランダムな値を計算したり、副作用を引き起こしてはいけない

2について少し説明します。Reduxの状態を安全に更新するにはstateを直接書き換えるような処理を行ってはいけません。

const state = {
	id: 1,
	message: 'Hello'
}
// 直接書き換えるのはよくない
state.message = 'Good morning'

そのため、スプレッド構文など用いてstateのコピーを作成して新しいstateを生成します。

newState = { ...state }

これらを踏まえて、Reducerの例は以下のようになります。

const initialState = { content: 'hoge' }

function todoReducer(state = initialState, action) {
  // actionによってstateを更新するロジックを変更する
  if (action.type === 'todo/todoAdded') {
    // stateのコピーを生成し、値を更新して返す
    return {
      ...state,
      // 新しい値をコピーして更新
      value: action.payload
    }
  }
  // stateを更新する必要がなければそのまま返す
  return state
}

Reducerはstateactionを受け取り、actionのtypeによってstateのコピーを作ることで更新していることがわかります。

Store

Reducerから返された新たなstateをStoreというオブジェクトでまとめて管理します。StoreはRedux ToolkitのconfigureStore にオブジェクト形式でreducerを渡すことで作成できます。
また、getState() メソッドを用いることで更新されたstateを取得することができます。

import { configureStore } from '@reduxjs/toolkit'
// reducerを渡す
const store = configureStore({ reducer: counterReducer })
// 更新されたstateを取得する
console.log(store.getState())

まとめ

Reduxを用いることで、Reactアプリケーションの複数コンポーネント間でのstate管理が容易になることがわかりました。
また、Reduxのデータフローは以下のようになります。

  1. ユーザの操作により、コンポーネントのstateが変更
  2. ActionCreatorによってActionを生成
  3. Actionをdispatch
  4. ReducerがActionとstateを受け取り、storeのstateを更新
  5. Storeから更新されたstateを取得

次回は実際にReduxを組み込んだ簡単なアプリケーションを開発していきます!
それでは🙌
参考 : https://redux.js.org/tutorials/essentials/part-1-overview-concepts