Подтвердить что ты не робот

MapDispatchToProps: любая точка?

Мне было интересно, есть ли еще точка, использующая mapDispatchToProps сегодня. Я работаю над учебниками документации по сокращению (для создания списка задач), где 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? Есть ли недостатки в простом возврате действия?

Спасибо!

4b9b3361

Ответ 1

Чтобы прояснить другой комментарий Mark:

Второй аргумент connect() может принимать две основные формы. Если вы передаете функцию в качестве аргумента, connect() предполагает, что вы хотите обработать подготовку отправки самостоятельно, вызывает вашу функцию с помощью dispatch в качестве аргумента и объединяет результат в реквизиты для вашего компонента.

Если вы передадите объект в качестве второго аргумента в connect(), предполагается, что вы дали ему карту имен prop для создателей действий, и поэтому он автоматически запускает все из них с помощью утилиты bindActionCreators и использует результат в качестве реквизита.

Однако передача одного создателя действия в качестве второго аргумента, как кажется вашему примеру, не будет делать то, что вы хотите, поскольку connect() интерпретирует это как функцию подготовки, а не создателя действия, который должен быть связан.

Итак, да, connect() поддерживает сокращенный синтаксис передачи в объекте, полном создателей действия, в качестве второго аргумента, но есть все еще хорошие варианты использования для фактической функции mapDispatchToProps для выполнения самих действий (особенно если ваша подготовка к отправке в какой-то мере полагается на фактические значения prop).

Вы можете обратиться к документам API для` connect().

Ответ 2

connect() автоматически свяжет отправку с вашими действиями, если они передаются как объект имен функций.

Нет, вам не нужно реализовывать mapStateToProps. Вместо этого вы можете просто передать вам следующие действия:

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