reactjs - 如何在我的 reducer 中允许多个语句？

Question

我被迫使用redux-actions 。在我的 reducer 中，这段代码有效:

return handleActions({
  [FOOBAR]: (state) => ({
    ...state, value: 'the user clicked something 2'
  })
}, {})

但是，在 reducer 中我想要console.log一些东西。我该怎么做？

Answer 1

您的代码当前从箭头函数返回一个对象来指示后续状态。您可以使用a block，而不是使用简写箭头函数语法来隐式返回对象。容纳多个语句，包括您的 console.log，而不仅仅是隐式返回:

[FOOBAR]: (state) => {
  console.log('Inside FOOBAR action')
  return {
    ...state, value: 'the user clicked something 2'
  }
}

由于缺少 ()¹，{} 象征一个 block 而不是对象文字。因此，您可以在 block 内使用其他语句，但必须返回后续状态对象，因为它不会隐式返回。

---

这里 {} 是一个 block 而不是对象文字的原因是 arrow functions有多种可接受的语法，其中一种使用 block :

(param1, param2, …, paramN) => { statements }

JavaScript 引擎将 {} 解释为一个 block 。因此，您的代码具有 ({}) ，这确实意味着对象文字，因为括号只能包裹在表达式上。由于 block 不是表达式，而对象字面量是表达式，因此引擎将其解释为对象字面量。