react-redux - 使用 Redux-Saga 的问题

Question

实际上，我正在使用 Google API 制作一个类似于 Google 搜索的示例项目。
这是我的代码。下面的函数从 API 获取数据并返回 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;
}

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

Answer 1

您可以通过设置 loading 来实现此目的。至true在进行 axios 调用之前。在您的组件中，当 loading 时显示加载指示器是 true .一旦 Axios 调用响应到达，派发一个 Action 来设置 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`.
    }