Кроме того, создатель действия переопределяет toString (), так что тип действия становится его строковым представлением. - PullRequest
0 голосов
/ 15 апреля 2020

Я изучаю избыточный инструментарий из официальных документов и наткнулся на эту строку - Also, the action creator overrides toString() so that the action type becomes its string representation. Что это значит?

Вот код из документов:

const INCREMENT = 'counter/increment'

function increment(amount) {
  return {
    type: INCREMENT,
    payload: amount
  }
}

const action = increment(3)
// { type: 'counter/increment', payload: 3 }
const increment = createAction('counter/increment')

let action = increment()
// { type: 'counter/increment' }

action = increment(3)
// returns { type: 'counter/increment', payload: 3 }

console.log(increment.toString())
// 'counter/increment'

console.log(`The action type is: ${increment}`)
// 'The action type is: counter/increment'

Так, например, когда я пишу что-то вроде

const increment = createAction("INCREMENT")
console.log(increment.toString())

Это логирование INCREMENT. Так это переопределение toString () ? Я действительно смущен.

Я новичок в редукс-инструментарии, и любая помощь будет признательна. Спасибо.

1 Ответ

0 голосов
/ 15 апреля 2020

Обычно, если вы вызываете toString() для функции, она возвращает буквальный исходный текст, который использовался для определения функции:

function myFunction() {
  const a = 42;
  console.log(a);
}

myFunction.toString()

"function myFunction() {
  const a = 42;
  console.log(a);
}"

Однако в этом случае мы хотим, чтобы someActionCreator.toString() вернуть тип действия, которое будет частью создаваемых им объектов действия:

const addTodo = createAction("todos/addTodo");
console.log(addTodo("Buy milk"));
// {type: "todos/addTodo", payload: "Buy milk"}
console.log(addTodo.toString());
// "todos/addTodo"

Чтобы это произошло, createAction переопределяет фактическую реализацию toString для этих создателей действия :

export function createAction(type: string): any {
  function actionCreator(...args: any[]) {
    return { type, payload: args[0] }
  }

  actionCreator.toString = () => `${type}`

  actionCreator.type = type

  return actionCreator;
}

Это особенно полезно, поскольку вычисляемые литеральные свойства объекта ES6 автоматически пытаются привести в соответствие любые переданные вами значения. Итак, теперь вы можете использовать функцию создателя действия в качестве ключа в объекте, и он будет преобразован в строку типа:

const reducersObject = {
  [addTodo]: (state, action) => state.push(action.payload)
}
console.log(reducersObject);
// { "todos/addTodo": Function}
...