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

Question

我被迫使用redux-actions。在我的减速器中，这段代码有效：

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

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

Answer 1

您的代码当前从箭头函数返回一个对象以指示后续状态。您可以使用块来容纳包括 your 在内的多个语句console.log，而不仅仅是隐式返回，而不是使用速记箭头函数语法来隐式返回对象：

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

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

---

之所以{}在这里是块而不是对象字面量，是因为箭头函数有多种可接受的语法，其中一种使用块：

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

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

Answer 2

用更详细的样式重写上面的箭头函数，这将允许您包含多个语句。然后你可以滑入控制台日志。

return handleActions({
  [FOOBAR]: (state) => {
    console.log('I LOG ALL THE THINGS');
    return {...state, value: 'the user clicked something 2'};
  }
}, {});