【GW】ES6、React、Flux、Reduxに触れてみた(3)

かなり日が経ってしまいましたが、GW勉強企画最終です。

 

▪︎ Redux

人気のFluxフレームワーク

 

*Fluxのおさらい

データフローを一方通行にすうrことで既存のMVCの問題だった依存関係の複雑さを回避できる。

 

▪︎トレンドな環境

Node.js + Babel + webpack + Redux

ES6→RS5

JSX→JS

トランスパイルはBabelに任せる!

 

▪︎Reduxの三原則

1. 状態はただ一つのStoreによって保持する

    状態はリードオンリーであり、その状態を変化させる

2. きっかけはActionの発行のみであること

3. 状態の変化は純粋関数で行うこと 

 

純粋関数?

副作用のない関数のこと

(現在の値を引数として受け取り、別の値を返却する)

 

▪︎Reduxの何が良いのか?

 

状態が一カ所に集約さえることにより、複雑性の軽減。

Reduxのコンセプトは、予測可能な状態コンテナ。

データフローが一方向だから状態遷移のきっかけがクリア。

 

大規模なアプリケーション

用途ごとの多数の状態管理

・・・・分散すると大変。デバックもつらい。

 

Reduxのコンセプトなら把握しやすい!

一方向のデータフロー=入出力の経路が明確になる。

 

*注意

一カ所に集約すると責務に分離せず複雑になる。

ReduxではReducerを使い、責務分割と状態の集約をする

アプローチがある。

 

▪︎もしReduxアプリケーションを作ることになったら・・・

例)

Actionから作る

actionCreatorとReducerの関数を作って手動で確認

stateもしくはdispatchをpropとしてラップするcomponentsとcontainesを作る

 

▪︎気づいたこと

reducersのexport default〜〜〜が

stateの値になっている。

stateの状態をみるとexportしないと値がセットされていない。

exportされるとreducerが実行される。

 

▪︎実験ソース

 

github.com