Question

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

现在，我有静态json数据，data/articles.js在store.js中创建默认状态。

由于

Answer 1

您应该使用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示例可能会有所帮助：）

Answer 2

我也有这个问题。事实证明，您必须为此简单任务添加大量代码。所以我简化了这个过程并创建了一个包，用于在redux - redux-async-initial-state中异步加载初始状态。

您可以查看示例，最后您的商店创建者将如下所示：

// Load initial state function
const loadStore = () => {
  return Promise(resolve => {
    fetch('/data/articles.js')
      .then(response => response.json())
      .then(resolve);
  });
}

const storeCreator = applyMiddleware(asyncInitialState.middleware(loadStore));
const store = storeCreator(reducer);

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

2 个答案: