reduxの基礎イントロ

Introduction · Redux

公式ドキュメントのIntroductionのうちmotivationからthree principles まで読んだのでそのメモ。

色々と複雑になったJSのシングルページアプリケーションのstateをより簡単に扱うようにするというシステム。 複雑化した原因というのがmutation(DOMの変更) と asynchronicity(非同期処理)を混同していたことにあったのでreactのようなライブラリがasynchronyとDOM manipulationをviewの部分で改善し、reduxはデータのstateを管理するという感じ。

ざっくりコンセプト

reduxにおけるTodoリストのstateの例

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

この部分はcodeで書き換えなどができないのでバグを作る心配は必要なくなる。modelのような概念。

もし上記のようなstateを変更しようとするならactionをdispatchする必要がある。

アクションの例

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

stateを変更しようとしたらactionでどのような変更を加えるかということを明示するので何か変更があった時の確認が容易。

このアクションとstateを結びつける役割をするのがreducer

reducerの例

//一つ目のreducer
function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter
  } else {
    return state
  }
}

//二つ目のreducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}

reducerはただのstateとactionを引数として扱う関数(どこかで宣言する必要あり)であり、変更後のstateをreturnする。

バラバラになったreducerをまとめ、管理するためのreducerで呼ぶ

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}

reduxの考え方はここまで。 これを実際に使うとなると、上記の関数をreact側で使えるようにreact-reduxなどを使うことになる。

reduxの三つの柱

またreduxには三つの概念で形成される。

Single source of truth

一つのstoreに対して一つのstateのみを保持する。 storeとはstateのtreeを保持するためのobject。

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

State is read-only

stateを変更するには何が起きているのか明示したactionを通してしかできない。

Changes are made with pure functions

actionによってstateがどのように変わるか、reducerを通して知ることができる。

今まではこれわかりやすいかなーとかネットサーフィンして調べていたけど、最初は公式のものを読んでわからなかったら付け足すような具合に探すのがいいかもしれない。

公式ページにこれ読んだらいいよーとか色々書いていたし。

ぜひぜひ入門者の方も原典に当たってみてください!

次は、Basics · Reduxから読んでみよう。