自分なりに少しまとめる

ひとまず誤りを含みつつ試して見る。

３つの原則

Redux入門 1日目 Reduxとは(公式ドキュメント和訳) - Qiita
http://goo.gl/jDkDUX

Single source of truth(ソースは１つだけ)
アプリケーション全体の状態(state)はツリーの形で１つのオブジェクトで作られ、１つのストアに保存される

State is read-only(状態は読み取り専用)
状態を変更する手段は、変更内容をもったactionオブジェクトを発行して実行するだけ

Mutations are written as pure functions(変更はすべてpureな関数で書かれる)
アクションがどのように状態を変更するかを「Reducer」で行う。

処理を学ぶ

図など

Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説 | mae's blog
http://goo.gl/YLwMB3

Fluxの概念図、Reduxの３原則などなど、、前提条件から記載がある

Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
http://goo.gl/UkXD7b

プロセスごとに概念図になっててわかりやすい

ReduxとES6でReact.jsのチュートリアルの写経 - undefined
http://goo.gl/C6C22V

Reduxの概念図

React 101, Part 2: Refactoring with Redux | Blog | Tighten Co. | Product Development for Web, Mobile, and Beyond
https://goo.gl/ELslfR

関数名を直接書いてあるのでわかりやすい。

Flux: Reduce Your Side Effects
http://goo.gl/ILGgqz

Flux的な説明？？まだよくわからない。

前提

スターターキットをベースにする

状態管理（ストア、レデューサー）

プロバイダー

AppContainer.js  にて生成される

メイン処理

main.js
ストアなど初期化処理
アプリケーションコンテナに
- ストアを紐付ける
- ヒストリを紐付ける
- ルート定義を紐付ける
描画、マウント

ルート定義

route/*
メインプリケーションのブートストラップと  フラクタルルート定義を含む

ルート定義のブートストラップ

route/index.js
下の階層のルート定義を読み込んだり、  直接定義したりしてルート定義する
JSXではなくreact-routerのルートオブジェクトを使う

フラクタルルート定義

route//
メインアプリケーションの下に紐づくのルート定義かな？
ファイル構造的には、この定義以下で、  再利用しない独自のコンポーネントやアクション定義をするみたい

（つまり、ファイルの構造はルーティング構造で分別して、  その中でオブジェクトの種類で分別する感じか）

レイアウト（ルート定義の一種？）

layout/*
Components that dictate major page structure
主要なページ構造を決定するコンポーネントと説明されている
レイアウトを切り出して定義
ルート定義の下位と同じ構造に見えるので、
公式にある「Fractal route」の一種といえるのかな。

ストア

レデューサー登記と注入

store/reducers.js
たぶん、レデューサーを管理する場所
- Reducer registry and injectionと説明されている
  レデューサーのストアという意味合いでこの構成なのかな
- ここでの内容としては、
  - ルートのレデューサーの定義（基底のレデューサーに任意の複数レデューサーをマージ）する関数
  - レデューサーを注入してからルートのレデューサーの再定義する関数
ストアの初期化時に、ストアに対して関連づけされる

モジュール（レデューサー・定数・アクション（アクションハンドラ））

Counter/module/counter.js
「Collections of reducers/constants/actions」と説明があり、
個別のレデューサーはモジュールとされてまとめられていた

アクションハンドラ

アクションを条件によってふり分ける場合の分岐処理、フィルタ処理  switch文で説明されることが多いみたい。

レデューサー

アクションと状態を紐付けるポイント
複数のレデューサーを作る場合には合成（combineReducers）する
http://mae.chab.in/archives/2885
スターターキットでは合成処理が抽象的に切り出されていて、より合理的

共通コンポーネント

components/*
共通化しうるプレゼンテーションに関わる部分のみ純粋に切り出されたコンポーネント
ヘッダーのコンポーネントなどの、コード再利用でなくとも、  ビューがルーティングがない共通的なものもここにおくのかな

フラクタルルートのコンポーネント

独自のプレゼンテーションに関わる部分のみ純粋に切り出されたコンポーネント

共通コンテナ

共通化しうるプレゼンテーション以外の切り出すことができない処理や描画などのコンポーネント

フラクタルルートのコンテナ

アクションとストアへのコンポーネント（モジュール）の関連づけの処理
おそらく、モジュールとして切り出さない場合には、ここにアクションなども記述される

ディスパッチ

dispatchはstateを変更する唯一の方法である。
dispatchはactionを引数に取り、dispatch actionのオブジェクトを返す。
http://fscoward.hateblo.jp/entry/2016/03/01/224557
ディスパッチの使い方はいろいろパターンがありそう。。
http://webdesign-dackel.com/2015/11/03/redux-periodic-action/
この記事もわかりやすい
fluxフレームワークreduxについてドキュメントを読んだメモ - fukajun - 僕はvimで行きます -
http://goo.gl/rYGSzu

connectメソッドを使って、共通のpropsを持つ親コンポーネントを作れる connectメソッドを使ってラップされたコンポーネントはdispatch, props, state を受け取ることができるようになるラップしたコンポーネントが対象、子孫コンポーネントには共有されない計画なくどの階層のコンポーネントでもラップしてしまうと各コンポーネントのコミュニケーションの流れが壊れるのでラップしすぎないように注意が必要

dispatcher
actionを受け取り、actionTypeに対応するstoreのcallback関数を呼び出しのステートを変更する
reduxではdispatcherというオブジェクトは存在しない、代わりにdispatchメソッドによってstoreのstateを変更するためのreducerが呼び出される

なるほど、　原型がFluxにあって、dispatcherのあり方が抽象化されていろんな意味で改善（？）されたということか
reactを使う場合にはpropsをstoreに紐付けるためにconnectメソッドを使う
http://mae.chab.in/archives/2885

Propsを通して、ReduxのStoreと連携するようにしています。これは後ほど説明しますが、React-Reduxのconnectメソッドを使って実現しています。

ミドルウェア

ストアのディスパッチをラップして拡張する部分らしい
まだ詳しく見てない！

ReduxのMiddlewareについて理解したいマン | moxt
https://goo.gl/nP0UJj