Redux saga - 如果数据已存在于 redux 存储中，则跳过 API 请求的点答案

【问题标题】：Redux saga - the point to skip API requsts if data already exists in redux storeRedux saga - 如果数据已存在于 redux 存储中，则跳过 API 请求的点
【发布时间】：2018-02-26 15:36:20
【问题描述】：

我正在使用 redux-saga 进行项目，我有一个问题要问你。我试图用谷歌的力量找到我的问题的答案将近两天，但它没有帮助。

我们有一些函数由 saga 在每个 FETCH_REQUEST 操作上触发。

export function* fetchData(action) {
  try {
    const usersList = (yield select()).usersList;

    // makes API call only if there is no users found in the current state
    if(!usersList) {
      const data = yield call(Api.fetchUser)
    }

    yield put({type: "FETCH_SUCCEEDED", usersList})
  } catch (error) {
    yield put({type: "FETCH_FAILED", error})
  }
}

成功时触发 FETCH_SUCCEEDED 操作，我们将接收到的数据保存到状态。但在我看来，“是否进行 API 调用”的决策点并不在正确的位置。当前的方法会导致产生一些在 sagas 中无用和跳过的操作。如果其他一些 sagas 订阅了 _REQUEST 操作，它们会触发另一个无用的操作，依此类推。

所以问题是 - 检查数据是否需要从 API 或 ReduxStore 加载的“最佳实践”位置是什么？

【问题讨论】：

您对这个问题陈述有满意的答案吗？我遇到了同样的问题，对在哪里处理这种情况感到困惑。我看到在组件中处理的一些限制，因为可能有很多组件都有这个用例。选择器就是为此而设计的，但我又在某处读到选择器应该是纯函数等等......

标签： reactjs redux react-redux redux-saga

【解决方案1】：

我假设您从组件中调度 FETCH_REQUEST 动作创建者。该组件可能接收userList 作为属性。所以这个组件是判断FETCH_REQUEST动作是否应该被调度的最佳位置。

类似这样的：

class MyComponent extends React.Component {
  componentDidMount() {
    if (!this.props.userList) {
      this.props.fetchData();
    }
  }
}

...

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在这种情况下，您不需要在 saga 中使用选择器和额外条件。

【讨论】：

感谢您的回复。我100%和你在一起。稍微升级一下，我们就有了带有 loadData() 函数的 HOC，它触发了所有 ..._REQUEST 动作。在我看来， loadData() 是进行决策的最佳场所。当 Saga 中当前的决策方法是“反模式”时，你能指出我的一些想法吗？
在一个典型的网络应用程序中，我们设置了loading 标志并显示一个加载指示器。然后，在 FETCH_SUCCEEDED 或 FETCH_FAILED 上，我们将 loading 标志设置为 false。因此，在没有实际 fetch 的情况下调度 FETCH_REQUEST 操作会导致 UI 中永久显示加载指示器。
所有事情都发生得如此之快，以至于对 UI 和加载器图标的更新做出反应，根本不会闪烁。另外我必须承认，在当前项目中，如果redux-state 元素是undefined，我们认为loading 阶段的数据是undefined 并省略isLoading 标志。这是好的还是坏的做法？