Redux 异步 API 调用 - 最新状态

Question

我目前在一家奥地利公司工作，我们正在为Windows开发一个文档管理系统。 2017 年初，我们开始使用 Angular 创建 Web 应用程序。但是，我们开始遇到应用程序状态的一些问题。

我们正在考虑使用 Redux 作为状态管理器，但我们有一个顾虑。

假设我们有一个 table 和 2 个文档

|--------------------------------|
| Document1.pdf                  |
|--------------------------------|
| Document2.pdf                  |
|--------------------------------|

我们还有所选文档的预览。

假设我们单击 Doc 1（服务器加载文档需要 5 秒）。单击 Doc1 1 秒后，我们单击 Doc2（服务器加载文档仅需 1 秒）。一秒钟后 Doc2 出现在预览中，但是 4 秒后 Doc1 被加载并显示在预览中。虽然我们目前选择了 Doc2。

当使用 Redux 时，我们是否必须手动检查 "correct" 文档，或者框架为我们做了一切，我们只需要实现服务器调用而不考虑应用程序的状态？

Answer 1

Redux is a predictable state container for JavaScript apps.

这就是 Redux 文档的开头。 Redux 不管理你的状态。它只保留它并提供确定性的突变。它教授了一些非常好的实践，实际上它是一款非常智能的软件。但是，如果没有您的一点帮助，它无法解决您的问题。 Redux 与管理状态无关。它是关于管理导致管理您的状态的流程。

我会通过标记用户最近点击的内容来解决您的问题。例如：

action                 | state
--------------------------------
clicking on Doc1       | state = { itemSelected: 'Doc1', data: null }
clicking on Doc2       | state = { itemSelected: 'Doc2', data: null }

然后当响应到来时，我们需要

形式的有效载荷

{ itemToLoad: 'Doc1', data: {...} }

剩下的很简单，我们只需检查 itemToLoad 是否等于 itemSelected。如果是，那么我们更新数据。

if (payload.itemToLoad === currentState.itemSelected) {
  return {
    itemSelected: currentState.itemSelected,
    data: payload.data
  }
} else {
  // if not equal we just ignore it and return the current state
  return currentState;
}

Redux 异步 API 调用 - 最新状态

Redux async API calls - most up to date state

dms

redux

angular