Reactを学ぶ5(Redux)

以下を参考に。 今から始めるReact入門 〜 Redux 編 immutability とは たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 Reduxが分からない人のためにReduxを概念から説明してみる 作業時間：3.5時間 経過時間：19.5時間

Reduxは名称からReactの関連ライブラリかと思っていた。しかし、独立している。 View側はReact以外のライブラリでも代替可能となっている。 Store、Actions周りの面倒を見ている。 Storeのデータを更新する時は、元のデータはimmutable(不変)に更新する。

特徴は以下。

• 1つのStoreで管理している。(One Store)
• immutableな性質を持っている。

immutableなデータとは、データをコピーした上で変更をかけていく。参照ではない。 assignメソッドを使うと、immutableを保てる。

const test = {name:'suzuki',age:20};
const hoge = Object.assign({},test,{name:'sugi'});

//test
//{name:'suzuki',age:20}
//hoge
//{name:'sugi',age:20}

それ以外のメソッドとスプレッド演算子がある。

Array.prototype.contact()
Array.prototype.filter()
Array.prototype.map()
Array.prototype.reduce()

reducerがStoreのデータを更新する処理にあたる。

store.subscribeでコールバック関数を登録する。

ActionCreatorの役割が分かってきた。 Actionはdispatchされた時に、どんなパターンかを判定させるのに必要だったが、Actionのデータを渡そうと静的になってしまう。動的なデータを渡すために、ActionCreatorという存在がある。ActionCreatorは関数。戻り値はオブジェクトになっていて、typeとデータを記述する方針をとる。引数に動的なデータを受け取り戻り値に渡す。API等のデータによって、dispatchを呼ぶ。Reduxでは、reducerにそのままデータを投げて処理を行う。

reactでreduxを扱う場合、react-reduxは必須なのか。 react-reduxが提供しているconnect関数に登場するmapStateToPropsとmapDispatchToPropsが分かっていない。 ReactとRecuxで開発する場合、Componentのpropsへstateやdispatchを紐付けるために、必要な役割。という認識になった。Component側からReduxのstateやdispatchへアクセスする手段。その処理はreducerになっているのか。 Component側でdispatchに関する処理を省く方法がある、BoundActionCreator。 BoundActionCreatorとは、bindActionCreatorsという関数で、dispatchの紐付けを容易にする方法であるらしい。

Redux-sagaが出てきたが、まだ掴めていない。タスクがどういう立ち位置なのか、処理のイメージは出来たけど、データフローの中で、どういう登場の仕方がイメージできていない。