运行 redux-thunk 操作而不调度答案

【问题标题】：Run redux-thunk action without dispatch运行 redux-thunk 操作而不调度
【发布时间】：2016-11-23 21:15:45
【问题描述】：

我正在使用 Redux 来管理我的应用程序状态，并且我使用 redux-thunk 进行了异步操作。

export const login = credentials => dispatch => {
   return doLogin(credentials).then(token => {
      localStorage.setItem('token', token)
      // this dispatch call was there before, but now it has gone,
      // because it is not necessary anymore
      // dispatch({ type: LOGIN_SUCCESS })
   })
}

问题是现在我有一个操作，它不会将任何操作分派到存储中，只是完成有关登录和存储令牌的工作。

这样的行为可以吗？我对这段代码没有那么自信，但我不知道如何让它变得更好。

【问题讨论】：

这个函数不会对状态做任何事情吗？

标签： redux redux-thunk

【解决方案1】：

对此没有规定，您不一定需要调度任何动作，但动作创建者根本不调度任何动作感觉很尴尬。

如果你真的不需要 dispatch 任何 action，也许该组件根本不应该连接到 Redux。动作创建者应该调度动作，如果没有，它就不是动作创建者，它是一个函数。您可以使用本地函数创建一个简单的组件，而无需使用 Redux 增加复杂性。

但是如果你想将它连接到 Redux，那么拥有一个不创建任何动作的动作创建者几乎没有任何意义。调度动作是动作创建者的设计目的。

尝试在您在问题中提出的这个示例中考虑用户体验。您可以使用操作创建器将令牌存储在本地存储中，甚至使用中间件更好，但您仍然需要调度一些操作以让您的应用程序知道发生了什么，以便它可以正常运行，让您的用户知道发生了什么也。例如，我可以在这里清楚地看到 3 个操作的空间：

LOGIN_REQUEST：它将在商店中设置一个状态，让用户知道应用程序正在尝试登录，并禁用输入，这样应用程序就不会表现得疯狂。请记住，在 localhost 中，API 响应可能会立即发生，但在网络不良或服务器过载的情况下，它会花费更多时间。
LOGIN_SUCCESS：它会让应用程序知道令牌现在已保存到本地存储中，并且用户可以被路由到其主页，或者只是更改当前页面的某些元素以指示成功登录。李>
LOGIN_FAILURE：它会让用户知道凭据无效并要求他重试。

即使您在登录后没有将用户引导至其他页面，您也可能需要更改屏幕中的某些内容以让用户知道登录已成功并显示退出选项。并且调度动作让 reducer 处理应用程序的状态突变是 Redux 的方法。

【讨论】：

【解决方案2】：

这是品味问题，但我个人不会将您的动作创建器与其效果紧密结合（项目设置在本地存储中）。

相反，我会发送一个动作，例如LOGIN_SUCCESS 将令牌作为其数据传入。然后让中间件处理该操作类型 - 即将令牌设置在本地存储中。

这样，在处理 doLogin 返回的凭据时，您会获得更大的灵活性。您应该追求每个软件都做自己的事情并做到最好的范例。所以你有一个功能来验证用户，然后将身份验证令牌交给另一个最了解如何处理它的部分。

【讨论】：

您对中间件的看法可能是正确的。但是 localStorage 仅用于该功能，因此我认为仅针对这种情况添加中间件会产生开销。
我猜是这样，但仍然 - 分离的关注点更容易推理。总而言之 - 这是一个选择问题。

【解决方案3】：

您要就没有硬性规则的事情征求意见，但经验法则是操作应该是对应用程序中发生的事情的最低限度描述。

Thunkified 操作通常是这种行为的一种解决方法，但在这种情况下，可以使用这种操作，因为即使它不会通过 reducer 对 Redux 状态产生影响，但您正在使用 (thunk)中间件用于执行副作用，中间件旨在响应操作。

您触发的“上游”动作不被下游减速器消耗的事实并不重要，尽管在开始时仍然dispatch({ type: 'LOGIN_REQUEST' }) 和dispatch({ type: 'LOGIN_SUCCESS'}) 可能是一个好习惯结束只是为了让下游应用程序有办法知道发生了什么，如果它以后想对它做点什么。

【讨论】：