ReduxとReflux

#**内容：**
 
 - 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
![7402c7f4-a7b2-d4a2-e30d-d4ab5816487c.png](https://qiita-image-store.s3.amazonaws.com/0/114590/0298a572-cfa1-d838-967c-97a8c611962e.png)
##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.動かす方法
ユーザーはアクションを添付したビューを対話する
![1-GNDs7SY53lEhp7mX8V25lw.png](https://qiita-image-store.s3.amazonaws.com/0/114590/d15dfd9c-c96e-33bf-8db5-31d0dd821ff2.png)
アクションはフォーマットを戻ります。
![1-p4EkWE_8upZ97Z0IapKDcQ.png](https://qiita-image-store.s3.amazonaws.com/0/114590/baec624f-3dff-3454-5383-fc4febf218a3.png)

               

同時にアクションもストアーに送ります。
![1-zmFp3bmDq7b6Bvlo8Ineag.png](https://qiita-image-store.s3.amazonaws.com/0/114590/9e3c1170-9785-26ad-4b48-ac954fbd21b6.png)


ストアーはアクションを受け取る次第に、 現在のstateとアクションをroot reducerに送ります。
![1-zrsSoAAyf4pqTMHiA6P8Ww.png](https://qiita-image-store.s3.amazonaws.com/0/114590/370e4895-51a8-1809-d0f8-283c23cd7a3c.png)

Root reducerはstateを受け取る次第に、小さく部分に分割すると、アクションと一緒に該当するreducerに送ります。
![1--S_dYe6BoQBgwSRpF7Hriw.png](https://qiita-image-store.s3.amazonaws.com/0/114590/d921a6b1-083e-5697-be8f-0de32988ae7b.png)

該当するreduceは受け取るstateから、state　copy を作って、変更して、再度root reducerに送ります。
![1-_R-rGNfKr2Xu2FlXNZNPJg.png](https://qiita-image-store.s3.amazonaws.com/0/114590/c3dbca8c-32c2-b5bf-c099-8e6e49b7970d.png)

root reducerはすべて新しいstateを集まって、 storeに送ります。
![1-bUMekI8QlEfFxSBCuVuIkw.png](https://qiita-image-store.s3.amazonaws.com/0/114590/db563a61-b7d6-6005-7f87-5c3b64b3a02a.png)

storeはlayer bindingに新しい stateを報告します。
 （layer bindingはstoreとviewを接続する部分です。すべてコンポーネントはストアーを接続できることを守ります。これはreduxです。 componentはデータを受け取るために、connect functionを使います。）


![1-x6vBvUlFJktJqty56jr0QQ.png](https://qiita-image-store.s3.amazonaws.com/0/114590/28183820-9ce4-d0b9-1c2a-ac78d01cf3f5.png)

layer bindingは新しいstateを送り返す要求をする。

![1-qGatznV4QujuxGe49YfX5A.png](https://qiita-image-store.s3.amazonaws.com/0/114590/e3a316b6-a18e-8568-8825-5ffd74ce5fb4.png)

その時、layer bindingはview（を使うとこと）にデータをレンダリングする。
![1-Je2mow8mjYLngXreGGlIEg.png](https://qiita-image-store.s3.amazonaws.com/0/114590/69bd6993-bf44-2c13-49c0-0085728ff3ce.png)

#4.Redux Dev Toolの説明
![687474703a2f2f692e696d6775722e636f6d2f4a34476557304d2e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/114590/c2475634-e136-9a44-2bfb-adbc69c125c1.gif)


**機能:**
- すべて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
<img width="936" alt="Screen Shot 2016-05-30 at 17.40.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/114590/c55c4dba-a608-55ff-13bf-cf50bb5f80ea.png">


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