web-dev-qa-db-ja.com

mapDispatchToProps：任意のポイント？

今日、mapDispatchToPropsを使用するポイントがまだあるのではないかと思いました。私は reduxドキュメンテーションチュートリアル （todoリストを作成するため）に取り組んでいます。ここで、VisibleTodoListは次のように記述されています：

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

しかし、今日、mapDispatchToPropsを定義してすべてを接続することはできないと言われました：

const VisibleTodoList = connect(
  mapStateToProps,
  toggleTodo
)(TodoList)

正しいですか？もしそうなら、mapDispatchToPropsを書くポイントは何ですか？単にアクションを返すことに欠点はありますか？

ありがとう！

reactjsreact-nativereduxreact-redux
16
Thanh-Quy Nguyen

他のマークのコメントを明確にするには：

connect()の2番目の引数は、主に2つの形式を取ります。関数を引数として渡す場合、connect()は、ディスパッチの準備を自分で処理することを想定し、dispatchを引数として関数を呼び出し、結果をコンポーネントのプロパティにマージします。

connect()の2番目の引数としてオブジェクトを渡すと、アクション作成者にプロップ名のマップが与えられていると想定されるため、bindActionCreatorsを介してそれらすべてを自動的に実行します。ユーティリティと結果を小道具として使用します。

ただし、例のようにsingleアクションクリエーターを2番目の引数として渡すと、connect()は、バインドする必要があるアクション作成者ではなく、準備機能としてそれを解釈します。

はい、connect()はアクション作成者で満たされたオブジェクトを2番目の引数として渡す簡略構文をサポートしますが、実際にmapDispatchToProps関数を渡して自分で物事を行う良い使用例があります（特に、派遣準備が何らかの形で実際のプロップ値に依存している場合）。

`connect（）のAPIドキュメント を参照することもできます。

23
markerikson

connect（）は、関数名のオブジェクトとして渡された場合、アクションにディスパッチを自動的にバインドします。

いいえ、mapStateToPropsを実装する必要はありません。代わりに、次のようなアクションを渡すことができます。

export default connect((state) => state, {
  action1,
  action2,
})(MyComponent);
8
Mark