使用 Redux-Saga 的问题

Question

实际上，我正在制作一个类似于 Google 使用 Google API 进行搜索的示例项目。这是我的代码。下面的函数从 API 和 returns json 格式的结果中获取数据，这需要一段时间，因为我需要一次调用这个函数几次。

export async function getSearchResult(searchValue, searchPage){
  var link = "https://api.serpwow.com/live/search?api_key=<MY_API_KEY>&q="+searchValue+"&page="+searchPage;
  var dt;
  await axios
    .get(link)
    .then(response => response.data)
    .then((data) => {
      dt = data;
    });
  return dt;
}

代码使用 return 值更新 initalState。这是我的问题。客户端在获取完成之前呈现旧结果。所以用户需要刷新列表才能得到新的结果。我能做什么？我试图在显示数据之前设置超时功能，但我知道这不是我的最佳解决方案。谢谢

Answer 1

您可以通过在执行 axios 调用之前将 loading 设置为 true 来实现此目的。在您的组件中，当 loading 为 true 时显示加载指示器。一旦 Axios 呼叫响应到达，派发一个动作将 loading 设置为 false & data 为 dt。下面的代码给出了如何实现这一点的想法：

export async function getSearchResult(searchValue, searchPage){
      var link = "https://api.serpwow.com/live/search?api_key=<MY_API_KEY>&q="+searchValue+"&page="+searchPage;
      var dt;
      // dispatch action to set `loading` to `true`
      await axios
        .get(link)
        .then(response => response.data)
        .then((data) => {
          dt = data;
        });
      // dispatch action to set `data=dt` & `loading` to `false`.
    }

使用 Redux-Saga 的问题

Problems using Redux-Saga

google-search-api

redux-saga

react-redux