JavaScript/Redux の履歴(No.15)

各機能の役割†

Action	単純なオブジェクト
Reducer	Actionの結果をもとにstateを更新（新しいstateに置き換え)
State	stateをpropに渡して、コンポーネント描写
Store	アプリで唯一全てのstateを包括する。これを変えるにはactionをdispatchする。大きくなってきたらreducer分割で対応せよ

https://github.com/reduxjs/redux/

https://github.com/react-samples/react-redux-tutorial

https://github.com/teradonburi/muiReduxForm

スプレッド演算子、filter,map

const middlware = function ({getState, dispatch}) {
   return function(next) {
     return function(action) {
       next(action) 
    }
  }
}

これが

const myMiddlware = ({ getState, dispatch }) => next => action => {
    next(action)
};

Store	状態の親玉。でっかいJSONイメージ。subscribeメソッドを実装すると変更検知ができる。dispatchもstoreから行う
Action	名前であるTYPEと中身データのpayloadを持つ。Storeを変えたければActionをコールするところから始まる。以下のオブジェクトがAction { type : "HOGE_ACTION"}
ActionCreator	Actionオブジェクトを返す関数
Reducer	以前の状態とActionを組み合わせて、新しいStateを作り出す
Router	パスとコンポーネントを結びつける

Router(パスへの追加)→connectでつないだコンポーネント→

reduxのstateをreactのpropsに変換するのと、Actionもpropsにマッピングする。

mapStateToProps	stateを引数にとってオブジェクトを返す
mapDespatchToProps	dispatchを引数にとって、dispatchする複数の関数を返す

const { testFunction,todos } = props
testFuctionでアクションを呼べる。上の宣言なしだとthis.props.testFunction
todosでpropsを呼べる。this.props.todos

react developer tools(ReactのページでElementタブの右端に出てくる)

Counter: 2067, today: 1, yesterday: 2