JavaScript/Redux

よくわからん

各機能の役割
勉強
github
よく使うJSの構文
- 関数の省略
構成要素
mapStateToProps mapDespatchToProps
ツール
参考サイト
その他

各機能の役割†

Action	単純なオブジェクト
Reducer	Actionの結果をもとにstateを更新（新しいstateに置き換え)
State	stateを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"}
ActionCreator	Actionオブジェクトを返す関数
Reducer	以前の状態とActionを組み合わせて、新しいStateを作り出す
Router	パスとコンポーネントを結びつける

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

↑

mapStateToProps mapDespatchToProps†

reduxのstateをreactのpropsに変換するのと、Actionもpropsにマッピングする。第一引数が、stateToPropで第二引数がActionToPropである。繋ぐのはconnect関数。

mapStateToProps	stateを引数にとってオブジェクトを返す
mapDespatchToProps	dispatchを引数にとって、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)

↑