时间戳

首页 > 解决方案 > react redux 中的 action 是如何工作的？

reactjs - react redux 中的 action 是如何工作的？

问题描述

所以我对这个 redux 的东西很陌生，所以像这样的基本东西仍然让我很困惑。

这就是我被告知如何在 react redux 中构建我的动作函数的方式

const load_user = () => async dispatch => {
dispatch({...})
}

connect我通过 react redux helper将此功能连接到我的组件。

所以我关于这个功能的问题是

  1. dispatchin that action 函数是从哪里来的？
  2. 为什么需要返回一个函数而不是在第一个函数中调用dispatch？

非常感谢！

标签： reactjsredux

解决方案

你在这里写的是一个 thunk 动作创建者，而不是一个普通的动作创建者，并且很好地表明教你这个的教程有点理解 Redux，但是有些概念有点错误。

一个正常的动作创建者看起来像

const load_user = () => {
  return {...}
}

对于这个简单的用例，在功能上 100% 相同，代码更少，你应该做什么。

另一方面，thunk 是一个正在被调度的函数，每次你向 Redux 调度一个函数时，thunk 中间件都会以 (dispatch, getState) 作为参数来执行该函数。这就是为什么它也有效，但不应该在那个简单的用例中使用。您可以在此处找到有关 thunk 的更多信息：https ://redux.js.org/usage/writing-logic-thunks

也就是说，在现代 Redux 中，您根本不应该编写普通的动作创建器，因为它们是为您自动生成的。您的教程可能会教您一种非常过时的 Redux 风格。现代 Redux 不使用 switch..case 减速器、ACTION_TYPES、手写动作创建器、不可变减速器逻辑或connect. 请参阅https://redux.js.org/tutorials/essentials/part-1-overview-concepts上的官方 Redux 教程。

推荐阅读