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

Question

我正在使用 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 中跳过的动作。如果其他一些传奇订阅了 _REQUEST 操作，他们会触发另一个无用的操作，依此类推。

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

Answer 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);

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