使用 React 在 Flux 架构中进行异步调用时的最佳实践是什么？

Question

我已经使用 React/Redux 大约两年了，但我目前正在参与一个使用 Facebook 的 Flux 而不是 Redux 进行状态管理的 React 应用程序。所以我开始阅读 Flux 以及与 Redux 的区别。我偶然发现了一些我不完全理解的东西，也许这里有人能够“讨论”一下这个问题！

在 Facebook 的关于 reduceStore 的 reduce 方法的 Flux 文档中，他们声明“这个方法应该是纯的并且没有副作用”（这听起来很像 Redux 中的 reducer 方法 - 纯函数）。但在他们自己的示例中：Flux async (https://github.com/facebook/flux/tree/master/examples/flux-async)，他们引入了处理 API 调用的 DataManager。在他们的示例中，该管理器是从 reduce 方法中调用的。因此，他们自己示例中的 reduce 方法会产生副作用，使其成为非纯函数。

这里的最佳做法是什么？而你自己用什么？这些杂质应该放在哪里？

我的“Redux”启发方法是创建一个从视图调用的动作创建器（如在 Redux 中），此方法执行异步 API 调用，然后调度动作。因此，为了澄清我的方法，我会将获取逻辑（副作用）从 store 中移除，转而使用一些 action-creator 方法。

sudo 代码中的动作创建者看起来像这样：

getSomedata(param){
    dispatch({type: GET_SOME_DATA_FETHCING})
    doApiCallAsync()
    .then( () =>{dispatch({type: GET_SOME_DATA_SUCCESS, result: json.result})})
    .catch( () =>{dispatch({type: GET_SOME_DATA_FAILURE})})
}

Answer 1

与 Redux 不同，Flux 根本不限制您处理异步操作的方式。最佳实践可能不存在；这取决于开发人员的口味。这是 Flux 中官方的异步示例：https://github.com/facebook/flux/tree/d95f9b9a06a24ccc8ba6b5742759ea3a383f20c9/examples/flux-async

如您所见，它通过商店中的TodoDataManager 调用API，例如this line 或this line；它不使用动作创建者。在TodoDataManager 中，它还调度操作。就我个人而言，我不太喜欢这种方法，或者……假设我不喜欢 Flux。

事实上，我正在将 Flux 应用程序迁移到 Redux。旧的 Flux 应用程序使用类似的方法，它使用事件发射器来通知组件有关存储更改的信息。代码库一团糟。

如果我必须使用flux，我将使用与您相同的方法，清楚地划分职责并使代码库更易于推理。但如果迁移到 Redux 是一种选择，我还是会选择 Redux。