在客户端和副作用上执行繁重的功能

Question

我的程序中有一些繁重的功能，例如，可能需要一些时间才能完成（<.2 秒和 > 1 秒）。这些纯函数，但我不想用计算来延迟应用程序的主要流程。叫到哪里会更正确呢？我想在 mapDispatchToProps 中，在选择器中（函数的输出存储在商店中），但同样这将全部完成同步，据我了解。在 AC 中，尽管 函数很干净 .

，但在我看来似乎做错了

现在我在中间件（在客户端计算，但是这不是副作用或什么?)

next(action)在middleware中首先简单的在开始计算的时候设置一个flag，然后在里面调用MW函数即returnsPromise，当函数完成后，它dispatch数据到存储并设置标志（计算完成）。我觉得这种做法并不完全正确。有什么想法吗？

如果平均函数计算时间 > 1s 怎么办？

函数是CLEAN，并且必须在客户端计算ONLY

现在我在中间件

中调用这个纯函数

export default (store) => (next) => (action) => {
  const { computeSomeData, type, ...rest } = action

  if (!computeSomeData) return next(action)

  store.dispatch({
    type: type + START,
    ...rest
  })

  someAsyncFunc(computeSomeData)
    .then(
      response => store.dispatch({...})
      error => store.dispatch({...})
  )
}

正确吗？

Answer 1

您可以使用 redux-saga and web-workers 来实现。

您将调度一个将被 redux-saga 代码捕获的操作，然后使用 webworker 在新线程上计算您的东西，这样您的应用程序的线程将运行正常。当 webworker 完成时，您在 redux-saga 上的代码将派发一个新的操作和结果，并且 react-redux 上的 reducer 将执行。

Answer 2

是的，你的方法是正确的。中间件非常适合这些副作用。在以 none 阻塞方式完成后，您调用一个操作并使用新计算的数据异步更新状态。这就是最佳实践。关于您的 mapStateToProps 评论。您应该使您的状态尽可能小，并且不要保留重复的数据。因此，如果您的计算数据是从存储中的实际数据派生的，并且保存计算数据将创建第二个真实来源，您应该将计算移至一个选择器中，该选择器在 mapStateToProps 中调用。为了防止不必要的计算和防止滞后，应该记住输出。例如使用 reselect 或 memoize-one。希望这可以帮助。快乐编码

在客户端和副作用上执行繁重的功能

Performing heavy functions on the client and side effects

javascript

middleware

reactjs

redux

函数是CLEAN，并且必须在客户端计算ONLY