メインコンテンツにスキップ

3原則

Reduxは、次の3つの基本原則で説明できます。

単一の真実のソース​

アプリケーションのグローバル状態は、単一のストア内のオブジェクトツリーに格納されます。

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

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
    }
  ]
}
*/

状態は読み取り専用です​

状態を変更する唯一の方法は、発生した内容を記述するアクション（オブジェクト）を発行することです。

これにより、ビューもネットワークコールバックも状態に直接書き込むことがなくなります。代わりに、状態を変換する意図を表現します。すべての変更は一元化され、厳密な順序で1つずつ行われるため、注意すべき微妙な競合状態はありません。アクションは単なるプレーンオブジェクトであるため、ログに記録したり、シリアライズしたり、保存したり、後でデバッグやテストの目的で再生したりできます。

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

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

変更は純粋関数で行われます​

アクションによってステートツリーがどのように変換されるかを指定するには、純粋なレデューサーを記述します。

レデューサーは、前の状態とアクションを受け取り、次の状態を返す純粋関数です。前の状態を変更する代わりに、新しい状態オブジェクトを返すことを忘れないでください。単一のレデューサーから始めて、アプリの規模が大きくなるにつれて、ステートツリーの特定の部分を管理する小さなレデューサーに分割できます。レデューサーは単なる関数であるため、呼び出し順序を制御したり、追加のデータを渡したり、ページネーションなどの一般的なタスクに再利用可能なレデューサーを作成したりできます。

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のすべてがわかりました。