LoginSignup
4
3

More than 5 years have passed since last update.

React Redux コンテナコンポーネントのプロパティにActionをdipatchするコード(mapDispatchToProps)の書き方

Posted at

React Redux を理解するために以下のサンプルコードを追ってました
TODOアプリ

コンテナコンポーネントのプロパティにActionをdipatchするプロパティ(よくある名前はmapDispatchToProps)の挙動がよく分からなかったのですがいろいろいじくっていたらわかったことがあったので共有

mapDispatchToProps が関数の場合は、引数で渡されるdispatchを明示的に読んでActionとプロパティが紐付けられます

containers/FilterLink.js
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'
const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => {
    dispatch(setVisibilityFilter(ownProps.filter))
  }
})

逆に
mapDispatchToProps がオブジェクトの場合は、dispatchを呼ばずに、Actionとプロパティが紐付けられます

containers/VisibleTodoList.js
import { toggleTodo } from '../actions'

const mapDispatchToProps =  ({
  onTodoClick: toggleTodo
})

ちなみにReduxの考え方に関しては以下の記事がわかりやすかったです
Reduxでコンポーネントを再利用する

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3