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)

https://react-redux.js.org/6.x/using-react-redux/connect-mapstate#connect-extracting-data-with-mapstatetoprops

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

https://react-redux.js.org/6.x/using-react-redux/connect-mapdispatch#connect-dispatching-actions-with-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)

んー続きを読んでみたけどいまいちわからない。

ちょっと疲れてきたので今日はここまで

See the Elephant

1992生まれのプログラマが書くエンジニアブログ

【React-Redux】mapStateToPropsとmapDispatchToPropsについて学んでみる