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

Question

我在使用redux时遇到了问题，尝试通过异步调用后端API返回的JSON来加载初始数据。目前，我正在尝试加载一堆不同的文章，但我不知道如何异步加载。由于这是一组初始数据，所以我应该同步加载吗？如果是，那么我该如何实现对API的同步调用？如果不是，那么我该如何解决这个异步问题？

目前，我有静态JSON数据`data / articles.js`，它在`store.js`中创建了一个默认状态。

谢谢。

- Parkicism

---

与其在应用程序启动时加载数据，不妨考虑在页面加载时将数据与页面一起发送。这可以显著加快页面启动速度。但是，这也可能会更慢，具体取决于数据量大小、后端获取所需时间以及用户是否能够在数据异步加载之前（部分）使用应用程序。 - DDS

如果数据没有加载，那么用户就无法使用Web应用程序。我认为这正是我想要的，即在页面加载时传输数据。我该如何做到这一点？谢谢。 - Parkicism

只需在准备页面时将其放在后端即可。 您可以使用脚本标记嵌入它。 您可以使用createStore在页面加载时加载它。 您甚至可以使用Redux自身来生成服务器上的数据。 您可以使用store.getState()获取数据，然后发送它。 - DDS

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（这是其中的一种选项：）。

如果您不知道如何执行特定部分，则可以参考此示例。

同时，官方异步示例可能会有所帮助：)

- MariuszJasinski

---

非常感谢您的帮助，我现在有点明白了。我需要再看几遍示例才能完全理解哈哈。 - Parkicism

你在哪里使用componentDidMount？是在容器中还是在组件本身中？谢谢。 - pikilon

Answer 2

我也遇到了这个问题。结果发现，为了完成这个简单的任务，你需要添加很多代码。因此，我简化了这个过程，并创建了一个用于在redux中异步加载初始状态的包 - redux-async-initial-state。

你可以查看示例，在你的情况下，最终你的store creator将如下所示：

// 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);

- Alexandr Subbotin