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

Question

我的程序中有一些繁重的功能，例如，可能需要一些时间才能完成（<.2s>1s）。这些纯函数，但我不想用计算来延迟应用程序的主要流程。在哪里称呼它更正确？我想在 ma​​pDispatchToProps 中，在选择器中（函数的输出存储在商店中），但这一切都将同步完成，据我了解。在 AC 中，虽然 函数是干净的，但在我看来做错了。

• 现在我在中间件中进行（在客户端计算，但这不是副作用或什么？）李>

中间件中的

next(action)首先简单地在计算开始时设置一个标志，然后在MW函数内部调用返回 Promise，当函数完成时，它 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 和web-workers 来实现。

您将调度一个动作，该动作将被 redux-saga 代码捕获，然后使用 webworker 在一个新线程上计算您的东西，这样您的应用程序的线程就可以正常运行。当 webworker 完成后，你在 redux-saga 上的代码会派发一个带有结果的新 action，react-redux 上的 reducer 会行动。

Answer 2

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