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
  

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