【Redux】Reduxチュートリアルのふんわりまとめ

はじめに

おそらく読んで理解できることはないので、なんとなく読んでExample: Todo Listで紹介されているようなサンプルアプリを作ることをおすすめします。
またReactで具体的に使う方法は後述のreact-reduxのガイドを読むことをおすすめします。

ReduxはFluxのコンセプトをベースにしています。
Flux：データが一方向にしか流れない

Action storeに送るデータです。 store.dispatch()を使用して送ります。それぞれのActionのtypeに、動作の内容を表す名前を文字列で指定します。

{ type: 'ADD_TODO', text: 'Read the Redux docs.' }

ActionCreater ActionCreaterは単にActionを返す関数です。 diapachにActionCreaterを渡します。もしくは、BoundActionCreaterを作って、それをダイレクトに呼びます。

非同期にもできますが、副作用もあります。

Reducer storeに送られたActionに応じてアプリのStateがどう変化するかを指定します。 Actionには何が起きるかだけを指定し、Stateの変化については指定しないでください。

function visibleTodoFilter(state = 'SHOW_ALL', action) {
  // Somehow calculate it...
  return nextState
}

Stateを設計するコードを書く前に必要なStateを設計します。 ReduxではStateは単一のオブジェクトとして保持されます。 UIの状態とデータは切り離して定義するべきです。 Stateはデータベースと同じく正規化するべきです。
Actionを使う Reducerは変更前のStateとActionを受け取って、次のStateとActionを返す純粋関数です。
- Reducerの中でしてはいけないこと
  - 引数を変更する
  - APIコールやルートの変更などの副作用
  - 非純粋関数を呼び出す
- すべきこと
  - stateを変更しない。Object.assingなどによってStateをコピーして返します。（ObjectSpreadSyntaxを使う方法もあります。）
  - Actionが定義されていない場合、元のStateを返します。
Reducerを分割する独立して更新が行われる場合は、別ファイルに分離します。 combineReducers(reducers)で結合します。

Storeは一つしか持てません。複数に分割したい場合は複数持つのではなく、ReducerCompositionを使用します。

Reduxは厳格な一方向のデータフローを中心に展開します。すべてのデータが同一のライフサイクルパターンに従い、ロジックを予測可能で理解しやすくします。 ReduxはFluxと同じではありませんが、共通の利点があります。

Reduxのデータライフサイクルは次の４ステップです。

storeはactionを起動する。 store.dispatch(action)
storeはreducerを呼び、現在のstate treeとactionを渡し、単純に次のstateを計算する。 let nextState = todoApp(previousState, action)
root reducerは複数のreducerを統合してtreeを作成する。 combineReducers()
storeはroot reducerから返された完全なstate treeを保存する。このときstore.subscribe(listener)で指定したlistenerが発動。

ReduxとReactは全く無関係だが、Reactと相性が良い。

npm install  react-redux

おそらく説明を読んで理解できることはないので、動くアプリを見て理解するのが良いと思われます。