reactjs - 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 调用”的决策点并不在正确的位置。当前的方法会导致产生一些无用的操作并在传奇中跳过。如果其他一些传奇订阅了 _REQUEST 操作，它们会触发另一个无用的操作，依此类推。

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

Answer 1

我假设您从组件中分派(dispatch) FETCH_REQUEST 操作创建者。该组件可能接收 userList 作为属性。因此，此组件是确定是否应调度 FETCH_REQUEST 操作的最佳位置。

类似这样的事情:

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

...

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

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