【Redux】Redux実装

Redux

Reduxの思想

component間のprops受け渡し(propsバケツリレー)の煩雑さ解消のため
storeを中心としたprops受け渡しとしたもの。
vuexの思想もこれ。

qiita.com

Redux実装の流れ

① Action

変更するstateを設定

  • Action : type、typeに対応する値

  • ActionCreator : Actionを返り値とする関数

② Reducer

actionを受け取った時のstate変更の挙動を決める

  • 各componentでreducer定義 : reducerは(state, action)を引数とした関数

  • cobineReducers

③ store

各componentのstateを保存する場所

  • createStore

  • Provider

④ connect

やはりconnectが鬼門

  • mapStateToProps

  • mapDispatchToProps

まとめ

  • connectが鬼門(2回目)
    mapStateToProps , mapDispatchToProps , dispatchの引数の取り方