reduxを使うためにいろいろお勉強4


# 自分なりに少しまとめる

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

## ３つの原則

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

> 1. Single source of truth(ソースは１つだけ)
> アプリケーション全体の状態(state)はツリーの形で１つのオブジェクトで作られ、１つのストアに保存される
> 2. State is read-only(状態は読み取り専用)
> 状態を変更する手段は、変更内容をもったactionオブジェクトを発行して実行するだけ
> 3. 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/createStore.js
* 状態を管理（更新やアクセスやイベントなど諸々）する場所
* 若干集積しているようなので具体的にみてみる
	* ミドルウェアとしてredux-thunkが読み込まれている
	* エンハンサーとしてdevtoolsの処理がある
	* createStoreで「レデューサー登記と注入、初期状態、エンハンサー」が 		ストアに紐づけられてデフォルトとして返される
		http://redux.js.org/docs/api/createStore.html
	* さらに非同期のレデューサーに関する初期化
	* 非同期のレデューサーにHMRを紐づけする

#### レデューサー登記と注入

* 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