如何调度一个超时的 Redux Action？

如何通过超时发送 Redux action？

问题：

我需要使用超时机制更新应用程序的通知状态。通知通常是一些错误或信息。我需要在 5 秒后发送另一个 action，将通知状态返回为初始状态，以便不显示通知。主要原因是为了提供一项功能，让通知在 5 秒后自动消失。

我曾尝试使用 setTimeout 并返回另一个 action，但是没有成功，也没有在网上找到相关方法。无论什么建议我都愿意尝试。

回答：

不必局限于将所有操作都写进函数库的思维惯式。如果你想在 JavaScript 中使用超时机制，直接使用 setTimeout 即可。Redux action 也同样适用这一原理。

Redux 确实提供了处理异步事件的备选方案，但是只有当你发现重复的代码过多时，才应该使用这些方案。除非你遇到此类问题，否则请直接使用该语言提供的方案，追求最简单的解决方案。

内联编写异步代码

这是最简单的方法。这里并未使用任何 Redux 特有的方法。

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

连接组件中也是同样操作：

this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

唯一不同的是，在连接组件中通常无法访问 store 本身，而是通过注入 props 获取 dispatch() 或特定操作创建器。但对于我们而言，这没有区别。

如果你不想在不同组件中发送相同的 action 时出现拼写错误，可以提取操作创建器，而不是内联发送 action 对象：

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

或者，如果你之前已通过 connect() 绑定它们：

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

到目前为止，我们还没有使用任何中间件或其他高级概念。

提取异步操作创建器

上述方法在简单情况下运行良好，但是你可能会发现它存在一些问题：

• 它迫使你在要显示通知的任何位置复制这段逻辑。
• 如果速度足够快，显示两个通知，则这些通知将没有 ID，因此会出现竞争条件。当第一个超时结束时，它会错误地派发 HIDE_NOTIFICATION，过早地隐藏第二个通知。

为了解决这些问题，你需要提取一个函数，集中超时逻辑并派发这两个操作。如下所示：

// actions.js
function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
}

let nextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
  // 为通知分配 ID，这样 reducer 就可以忽略不当前可见通知的 HIDE_NOTIFICATION。
  // 或者，我们可以存储超时 ID 并调用 clearTimeout()，但是我们仍然需要在一个地方执行此操作。
  const id = nextNotificationId++
  dispatch(showNotification(id, text))

  setTimeout(() => {
    dispatch(hideNotification(id))
  }, 5000)
}

现在，组件可以使用 showNotificationWithTimeout 显示通知，无需重复此逻辑或使用不同通知出现竞争条件：

// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')    

showNotificationWithTimeout() 为什么接受 dispatch 作为第一个参数？因为它需要向 store 发送操作。组件通常可以访问 dispatch，但是由于我们希望外部函数控制发送操作，因此我们需要将其控制权交给它。

如果你已经从某个模块导出了一个单一 store，则可以导入它并直接在其中进行发送操作：

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

看起来更简单，但 我们不推荐此方法。我们不喜欢它的主要原因是 它强制要求 store 成为单例。这使得实现服务器端渲染非常困难。在服务器端，你希望每个请求都有自己的 store，以便让不同的用户获得不同的预加载数据。

单一 store 也使得测试更加困难。你在测试操作创建器时，无法再模拟一个 store，因为它们引用的是从特定模块导出的特定 real store。你甚至不能从外部重置其状态。

因此，虽然你从技术上可以从模块中导出一个单一 store，但我们不建议这么做。除非你确定你的应用永远不会添加服务器端渲染，否则不要这样做。

回到上一个版本：

this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

这解决了重复逻辑的问题，避免了竞争条件。

Thunk 中间件

对于简单的应用，上述方法就足够了。如果你对此感到满意，不必担心中间件。

然而，在较大的应用中，你可能会发现其中存在某些不便。

例如，将 dispatch 传递来传递去似乎很不幸。这使得将容器组件和表现层组件分离变得更加困难，因为任何按上述方式异步发送 Redux 操作的组件都必须接受 dispatch 作为 props，以便可以进一步传递它。你不能再使用 connect() 绑定操作创建器是因为 showNotificationWithTimeout() 并不是真正意义上的操作创建器。它不会返回 Redux 操作。

此外，记住哪些函数是同步操作创建器（例如 showNotification()），哪些函数是异步辅助函数（例如 showNotificationWithTimeout()），可能很麻烦。你必须以不同的方式使用它们，并且小心不要将它们相互混淆。

这是我们找到一种方法来“合法化”将这种模式提供给辅助函数并帮助 Redux 将此类异步操作创建器“视为”正常操作创建器的特殊情况而不是完全不同的函数的动机。

如果你仍然坚持，并且也认为你自己的应用中存在这个问题，欢迎使用 Redux Thunk 中间件。

简单来说，Redux Thunk 教会 Redux 识别实际上是函数的特殊类型的操作：

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

当启用此中间件时，如果你发送一个函数，Redux Thunk 中间件会将 dispatch 作为参数传递给它。它还会“吞掉”此类动作，所以不必担心你的 reducers 会收到奇怪的函数参数。你的 reducers 只会收到常规对象操作——直接发送的操作，或者如我们刚刚描述的那样，由函数发送的操作。

看起来没什么用，不是吗？在这个特定情况下不是。但它允许我们将 showNotificationWithTimeout() 声明为一个常规的 Redux 操作创建器：

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

以上是如何调度一个超时的 Redux Action？的详细内容。更多信息请关注PHP中文网其他相关文章！