勉強

https://qiita.com/tomzoh/items/7fabe7cb57dd96425867

https://qiita.com/takayuki-ochiai/items/d2fd896627ecf0b466be

https://qiita.com/jabba/items/5ebea8d19809a4e0f8c6

https://super-yusuke.gitbook.io/udemy-course/meteno-react-app/react-dearwosuru

よく使うJSの構文

スプレッド演算子、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"}
ActionCreatorActionオブジェクトを返す
Reducer以前の状態とActionを組み合わせて、新しいStateを作り出す
Routerパスとコンポーネントを結びつける

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

mapStateToProps mapDespatchToProps

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

mapStateToPropsstateを引数にとってオブジェクトを返す
mapDespatchToPropsdispatchを引数にとって、dispatchする複数の関数を返す
const { testFunction,todos } = props
testFuctionでアクションを呼べる。上の宣言なしだとthis.props.testFunction
todosでpropsを呼べる。this.props.todos

Action

Reducer

State

ツール

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

参考サイト

http://numb86-tech.hatenablog.com/entry/2016/11/20/124316 https://blog.mismithportfolio.com/web/20161107reactrouter

その他

Counter: 2067, today: 1, yesterday: 2

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS