三つの原則

Redux は次の三つの基本原則で説明できます:

信頼できる唯一の情報源

グローバル state は単一の store 内のオブジェクトツリーとして管理されます。

これによりユニバーサルアプリの作成が容易になります。サーバーの状態をシリアライズしてクライアント側でハイドレートする際、追加のコーディングが不要になるためです。単一の状態ツリーはアプリケーションのデバッグや検査を容易にし、開発サイクルを高速化するために開発中にアプリ状態を永続化することも可能にします。従来実装が困難だった機能（Undo/Redo など）も、すべての状態が単一ツリーに格納されていれば驚くほど簡単に実装できます。

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

状態は読み取り専用

状態を変更する唯一の方法は、発生した事象を記述するオブジェクトである action を dispatch することです。

これによりビューやネットワークコールバックが直接状態を書き換えることが防止されます。代わりにそれらは状態を変換する意図を表明します。すべての変更が中央集権化され厳密な順序で逐次処理されるため、注意すべき微妙な競合状態が発生しません。action はプレーンオブジェクトであるため、ログ記録、シリアライズ、保存が可能で、後でデバッグやテスト目的で再生することもできます。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

変更は純粋関数で行う

状態ツリーが action によってどう変換されるかを定義するために、純粋な reducer を記述します。

Reducer は単なる純粋関数で、前の状態と action を受け取り、次の状態を返します。前の状態を変更（mutation）するのではなく、新しい状態オブジェクトを返すことを忘れないでください。最初は単一の reducer から始め、アプリが成長するにつれて状態ツリーの特定部分を管理する小さな reducer に分割できます。Reducer は単なる関数なので、呼び出し順序の制御、追加データの受け渡し、ページネーションなどの共通タスク向けの再利用可能な reducer の作成も可能です。

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

以上です！これで Redux の核心を理解しました。

信頼できる唯一の情報源​

状態は読み取り専用​

変更は純粋関数で行う​

信頼できる唯一の情報源

状態は読み取り専用

変更は純粋関数で行う