Зачем мне добавлять фигурные скобки создателю действия?

Question

Создатели действия:

export const addTodoCustom = function (text) {
    return {
        type: "ADD_TODO",
        id: nextTodoId++,
        text
    };
};

Правильное утверждение:

import * as actions from "../actions"
import AddTodo from "../components/AddTodo";
import {bindActionCreators} from "redux";
import {addTodoCustom} from "../actions";


export default connect(mapStateToProps, {addTodoCustom})(AddTodo);

Неправильное утверждение:

export default connect(mapStateToProps, addTodoCustom)(AddTodo);

Зачем мне добавлять фигурные скобки в действие создатель в React с Redux? Каков синтаксис Javascript?

Обновление:

Пример проекта: https://github.com/gongzelong0718/redux-quickstart-tutorial/tree/question

Примечание: пожалуйста проверить ветку question

Обновление 2

Вот что я подумал:

Я проверяю синтаксис JavaScript ES6: Сокращенное значение литерала расширенного объекта

Правильный оператор равен:

export default connect(mapStateToProps, {a: addTodoCustom})(AddTodo);

Так почему я нужно использовать {a: addTodoCustom} вместо addTodoCustom?

Answer 1

Во-первых, вам нужно импортировать функцию connect, прежде чем вы сможете использовать ее следующим образом:

import { connect } from 'react-redux';

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

Я думаю, что вам также не хватает вашего свойства payload, поэтому вместо этого вы хотите, чтобы ваш создатель действий выглядел так:

export const addTodoCustom = text => {
   return {
     type: "ADD_TODO",
     id: nextTodoId++,
     payload: text
   };
};

Было бы полезно, чтобы вы также опубликовали свой редуктор, поскольку это все часть системы Redux.

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

После того, как вы выполнили все вышеперечисленное, этот export default connect(mapStateToProps, {addTodoCustom})(AddTodo); должен работать, пока у вас есть функция mapStateToProps. Если нет, то вам нужно написать это так: export default connect(null, {addTodoCustom})(AddTodo);

Вы никогда не показывали содержимое вашего AddTodo компонента, и, используя mapStateToProps, можно только предполагать, что это класс- на основе компонента, было бы полезно, если бы вы также поделились этим кодом.

Answer 2

Проверка исходного кода (bindActionCreators) [https://github.com/reduxjs/redux/blob/9d3273846aa8906d38890c410b62fb09a4992018/src/bindActionCreators.ts] . Мы знаем,

export default function bindActionCreators(
  actionCreators: ActionCreator<any> | ActionCreatorsMapObject,
  dispatch: Dispatch
) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${
        actionCreators === null ? 'null' : typeof actionCreators
      }. ` +
        `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  const boundActionCreators: ActionCreatorsMapObject = {}
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

Итак, , последняя причина в том, что нам нужно передать карту в качестве 1-го параметра bindActionCreators. Поэтому нам нужно передать объект с ключом и значением. {a: addTodoCustom}, ActionCreatorsMapObject подобно тому, что определено в исходном коде, а не addTodoCustom, который является объектом, а также функцией

Но есть другой вопрос:

Почему он выполняет следующие коды, когда я передаю addTodoCustom

export default function bindActionCreators(
  actionCreators: ActionCreator<any> | ActionCreatorsMapObject,
  dispatch: Dispatch
) {
  if (**typeof actionCreators === 'function'**) {
    return bindActionCreator(actionCreators, dispatch)
  }

и затем вызываю bindActionCreator(actionCreators, dispatch)

function bindActionCreator<A extends AnyAction = AnyAction>(
  actionCreator: ActionCreator<A>,
  dispatch: Dispatch
) {
  return function(this: any, ...args: any[]) {
    return dispatch(actionCreator.apply(this, args))
  }
}

Я прочитал do c https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining -the-mapdispatchtoprops-function-with-bindactioncreators

bindActionCreators принимает два параметра:

Функция (создатель действия) или объект ( каждое поле - создатель действия)

Там написано, что я могу передать функцию.

ИМХО, addTodoCustom - это функция {a, addTodoCustom} - это объект.

Поправь меня, если я ошибаюсь.