【React-Redux】mapStateToPropsとmapDispatchToPropsについて学んでみる
mapStateToPropsとmapDispatchToPropsについて
昨夜はreduxについて学んだ。 今日はreact-reduxについて調べる。
https://namu-r21.hatenablog.com/entry/2019/07/22/192333
react-reduxについて
reactはdomレンダリングのためのFWである。 reduxはデータフロー制御のためのアーキテクチャである。
これら2つは直接的に関係しない。
というよりも、react上に描画されるデータのフロー制御をreduxに担当させる、という使われ方が多いだけである。
直接関係ないのだから、2つの世界を繋ぐインターフェースが必要となる。
これを行うために弊チームでは react-redux
というライブラリを利用しているらしい。
詳しい話は公式に譲る。
https://github.com/reduxjs/react-redux
reactとreduxをconnectするのがreact-redux
https://react-redux.js.org/introduction/quick-start
クイックスタートから引用。
React Redux provides a connect function for you to connect your component to the store.
ほうほう。繋ぐと。
Normally, you’ll call connect in this way:
ん?
import { connect } from 'react-redux' import { increment, decrement, reset } from './actionCreators' // const Counter = ... const mapStateToProps = (state /*, ownProps*/) => { return { counter: state.counter } } const mapDispatchToProps = { increment, decrement, reset } export default connect( mapStateToProps, mapDispatchToProps )(Counter)
以上終わり。んんん???
mapStateToProps
と mapDispatchToProps
ってなんだよ。
公式を読んでみる mapStateToProps
参考にするコードはこれ
export default connect( mapStateToProps, mapDispatchToProps )(Counter)
As the first argument passed in to connect, mapStateToProps is used for selecting the part of the data from the store that the connected component needs.
connect関数の第一引数、mapStateToPropsは connected component
が必要とする形でstoreからデータの一部を選ぶために使われる。
- It is called every time the store state changes. - It receives the entire store state, and should return an object of data this component needs.
- storeのstateが変わるたびに呼ばれる
- storeのstateを受け取り、componentが求めるデータObjectを返す
つまり、 storeのstateから必要なデータを抽出しcomponentに渡すための変換器
ってことっぽい。
connected component
って多分reduxと接続された react componentのことだろう。上の例だと Counter
がそれになりそう。
Counter
に渡すpropsを定義するのが mapStateToProps
の仕事っぽいね。
componentのためにpropsを作るmapStateToProps
https://react-redux.js.org/6.x/using-react-redux/connect-mapstate#return
以下のコードのようにstateの中身を元に新しいObjectを作りcomponentに渡す。
function mapStateToProps(state) { return { a: 42, todos: state.todos, filter: state.visibilityFilter } } // component will receive: props.a, props.todos, and props.filter
このようにしてstateからcomponentが必要なデータ(props)を作る(mapping)する。
だから mapStateToProps
なんだね。
第2引数で state以外の値を取ることができるので、stateに新しい値を織り交ぜてpropsを作ることもできるらしい。
function mapStateToProps(state, ownProps?)
なんとなく理解できたから次に行こう
mapDispatchToProps を見てみよう
そもそも dispatch
ってなんだっけ?
昨日学んだ記事から引用
dispatch: reducerが作ったstateを実際に適用し、storeで扱うstateを更新する
そうそう…storeの中にあるstateは外からは直接変更できなくて、 dispatch
することでstateの更新ができるんだった。
dispatch
という名前的に action
を扱うような気がするよね。
見ていこう。
公式を読んでみる mapDispatchToProps
As the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store. dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.
- mapDispatchToPropsを使うことでactionを元にしたstateの更新ができる(dispatch)。
- dispatchはstateを変更できる唯一の方法である。
fmfm
With React Redux, your components never access the store directly - connect does it for you. React Redux gives you two ways to let components dispatch actions:
reduxでは componentからstoreに直接触れることはできないし、connectでも同じ。react-reduxでは2通りのdispatch方法があるよ。
By default, a connected component receives props.dispatch and can dispatch actions itself. connect can accept an argument called mapDispatchToProps, which lets you create functions that dispatch when called, and pass those functions as props to your component.
- props.dispatch を受け取ってdispatch(これが普通)
- connect関数が受け取る mapDispatchToPropsによる方法。 -これはdispatchされた時に実行される関数を作ることができる上に、propとしてそれらの関数がcomponentに渡される。
ここまで読むとなんとなく以下までわかった
- react componentにstoreを更新するための操作方法を提示するためのもの
- どうやら dispatchの方法をcomponentに定義して渡せるっぽい
mapDispatchToProps の使われ方
mapDispatchToPropsを定義しない時はデフォルトのdispatchが使用される。
connect(mapStateToProps /** no second argument */)(MyComponent)
んー続きを読んでみたけどいまいちわからない。
ちょっと疲れてきたので今日はここまで