各機能の役割

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

勉強

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

github

https://github.com/reduxjs/redux/
https://github.com/react-samples/react-redux-tutorial 
https://github.com/teradonburi/muiReduxForm

よく使う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にマッピングする。 第一引数が、stateToPropで第二引数がActionToPropである。繋ぐのはconnect関数。

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

シンプルに記載

import { connect } from 'react-redux'
import MyComponent from './my-component'
import { actionCreatorA, actionCreatorB } from './my-module'
export default connect(
 ({users, todos}) => ({users, todos}),
 {
   actionCreatorA,
   actionCreatorB
 }
)(MyComponent)

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: 1886, today: 1, yesterday: 0

トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-10-14 (金) 13:16:52