内容：
- Refluxの弱点
- Reduxの説明
- Reduxを動かす方法
- Redux Dev Toolの説明
- Homeup：RefluxとReduxの比較
- 最後に
1. Refluxの弱点
- Refluxは古いになりましたから、時代にとって、不具合になる 。また、Refluxの発達はだんだん止まっている。
- 複雑な建築を使って、初心者にとって、分かりにくいです。 - 結果が少ないですが、たくさんコード、処理がかかります。
- Dispatcherを使わない（実際はあるですが、小さく部分に分割する）、それで、管理にくいです。flux/reduxよりパフォーマンスが良くない。
- 二つストアのデータの依存を管理にくいです。 - ビューはいつもストアから聞かなければなりませんです。ユーザーからビューを対話するとき、すべてを使っているビューをもう一度レンダーします。それで、レンダーのパフォーマンス（速度）が低くなります。 - Dev Toolがありません(Redux: https://github.com/gaearon/redux-devtools) - 各コンポーネントデータを保存するstateを使いますから、メモリがかかります。
- ドキュメントが少ないです。インターネットでほとんど flux/reduxのドキュメントです
2. Reduxの説明
Reduxは”a predictable state container for JavaScript apps.”
Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。
Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJSやjQueryなどと併せて使用することもできますが、Reactと使用するのが一番相性がいいです。
Reduxの要素:
Reduxの要素と、それらの相関図です。
* Action
* ActionCreator
* Store
* State
* Reducer
Reduxの3原則
Reduxの基本設計は以下の3つの原則に基づいて設計されています。
1. Single source of truth
アプリケーション内でStoreは1つのみとし、Stateは単独のオブジェクトとしてStoreに保持される。
2. State is read-only
Stateを直接変更することはできず、actionをStoreへdispatchすることでしかStateは変更できない。
3. Mutations are written as pure functions
Stateを変更する関数(Reducer)はpureな関数にする。
3. Reduxを動かす方法
a.セットアップ
- 準備したストアーを受け取る: Root Componentはストアーを作って, 同時に該当するreducerをストアーに添付します。
- store と componentの接続を作る
- action callbackを作ります。
b.動かす方法
ユーザーはアクションを添付したビューを対話する
アクションはフォーマットを戻ります。
同時にアクションもストアーに送ります。
ストアーはアクションを受け取る次第に、 現在のstateとアクションをroot reducerに送ります。
Root reducerはstateを受け取る次第に、小さく部分に分割すると、アクションと一緒に該当するreducerに送ります。
該当するreduceは受け取るstateから、state copy を作って、変更して、再度root reducerに送ります。
root reducerはすべて新しいstateを集まって、 storeに送ります。
storeはlayer bindingに新しい stateを報告します。
（layer bindingはstoreとviewを接続する部分です。すべてコンポーネントはストアーを接続できることを守ります。これはreduxです。 componentはデータを受け取るために、connect functionを使います。）
layer bindingは新しいstateを送り返す要求をする。
その時、layer bindingはview（を使うとこと）にデータをレンダリングする。
4.Redux Dev Toolの説明
機能:
- すべてactionとstateをチェックできます。
- 前のアクションを戻られます。
- reducerのコードを変更すると、アクションの依存を再度実行します。
- reducerを実行しない場合は、起きたことを見えます。
- ページをリロードする場合は、デバッぐを続けられます。
セットアップ:
- Npm: https://github.com/gaearon/redux-devtools
- Chrome Extension:https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja
5.Homeup：RefluxとReduxの比較
NPMダウンロードの比較:
http://www.npmtrends.com/redux-vs-reflux-vs-flummox-vs-alt
Homeupにとって、Reduxの利益:
- Redux はroot storeを使うので、コード数を少なくなって、ダータ修理も簡単になります。（Homeupにとって、たくさん問題解決できる。例：すべて保存ボタン）
- 同じ場所ですべてstateを保存するので、管理やすいです。
- Reduxは データを変更したcomponentだけをレンダリングして、すべてcomponentをレンダリングではない。それで、パフォーマンスを高くなります。
- ビューはいつもストアから聞くことは必要がない、ストアーはアクションから聞いて、アクションを呼ばれる時、ストアーはreducerにstate送ります。後で、reducerはデータを修理して、再度componetをレンダリングします。
- Develop tool があるので、開発することは簡単になって、速度も速くなります。
- 開発するコミュニティを成長しているので、将来、良い改善があると思います。
6.最後に
以上がReduxの基礎となります。使うするために、以下の記事を参考にしてください。
http://redux.js.org/index.html
http://qiita.com/kiita312/items/49a1f03445b19cf407b7
http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container
https://www.npmjs.com/package/redux