如何在React redux中使用ajax调用加载初始数据集？

发布时间：2020-12-15 16:19:08 所属栏目：百科来源：网络整理

导读：我有一个问题,即redux尝试通过异步调用加载初始数据来调用返回 JSON的后端API.现在,我正在尝试加载一堆不同的文章,但我不知道如何异步加载它.由于它是一组初始数据,我应该同步加载它吗？如果是,那么我将如何实现对API的同步调用？如果没有,我将如何异步解决

我有一个问题,即redux尝试通过异步调用加载初始数据来调用返回 JSON的后端API.现在,我正在尝试加载一堆不同的文章,但我不知道如何异步加载它.由于它是一组初始数据,我应该同步加载它吗？如果是,那么我将如何实现对API的同步调用？如果没有,我将如何异步解决这个问题？

现在,我有静态json数据,data / articles.js,它们在store.js中创建一个默认状态.

谢谢

解决方法

您应该使用 redux-thunk中间件,它允许您分派异步操作和 fetch库(例如)以下载您的初始数据.

所以：
1)创建一个获取数据的动作,例如：

export function fetchData() {
  const options = {
    method: 'GET',headers: {
      'Authorization': 'Client-ID xx' // if theres any needed
   }
  }

  return (dispatch) => {
    return fetch('yourUrl.json',options)
      .then(response => response.json())
      .then(data => dispatch(receiveYourData(data)))
      .catch(err => console.log(err));
 }
}

receiveYourData是一个将数据置于您的状态的操作,例如：

export function receiveYourData (payload = []) {
  return {
    type: RECEIVE_DATA,payload: payload
  }
}

当然,您必须编写动作处理程序,在分派动作后,将把数据置于您的状态.

如果您有自己的设置(类似于上面的内容),您应该在componentDidMount生命周期方法中调度fetchData(当然是其中一个选项:)).

如果你不知道如何做特定的部件,你可以参考这个Example.

另外official async示例可能会有所帮助:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!