自分なりに少しまとめる
ひとまず誤りを含みつつ試して見る。
３つの原則
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/createStore.js
- 状態を管理（更新やアクセスやイベントなど諸々）する場所
- 若干集積しているようなので具体的にみてみる
- ミドルウェアとしてredux-thunkが読み込まれている
- エンハンサーとしてdevtoolsの処理がある
- createStoreで「レデューサー登記と注入、初期状態、エンハンサー」が
ストアに紐づけられてデフォルトとして返される
http://redux.js.org/docs/api/createStore.html - さらに非同期のレデューサーに関する初期化
- 非同期のレデューサーにHMRを紐づけする
レデューサー登記と注入
- store/reducers.js
- たぶん、レデューサーを管理する場所
- Reducer registry and injectionと説明されている
レデューサーのストアという意味合いでこの構成なのかな - ここでの内容としては、
- ルートのレデューサーの定義（基底のレデューサーに任意の複数レデューサーをマージ）する関数
- レデューサーを注入してからルートのレデューサーの再定義する関数
- 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/rYGSzuconnectメソッドを使って、共通の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/2885Propsを通して、ReduxのStoreと連携するようにしています。これは後ほど説明しますが、React-Reduxのconnectメソッドを使って実現しています。
ミドルウェア
-
ストアのディスパッチをラップして拡張する部分らしい
-
まだ詳しく見てない！
ReduxのMiddlewareについて理解したいマン | moxt
https://goo.gl/nP0UJj