action异步返回json数据

在实际的web开发过程中，后端向前端返回数据的格式一般是json。而前端在向后端请求数据时，可能会遇到异步请求的情况。下面，我们就来介绍一下action异步返回json数据的实现。

function fetchUser(userId) {
  return function(dispatch) {
    dispatch(requestUser(userId));
    return fetch(`https://example.com/users/${userId}`)
      .then(response => response.json())
      .then(json => dispatch(receiveUser(userId,json)));
  };
}

function requestUser(userId) {
  return {
    type: REQUEST_USER,userId
  };
}

function receiveUser(userId,json) {
  return {
    type: RECEIVE_USER,userId,user: json.data.children.map(child => child.data),receivedAt: Date.Now()
  };
}

代码中，fetchUser是一个异步action creator，用于异步请求用户数据。其中，dispatch是Redux库提供的一个函数，用于发送action。

在fetchUser函数中，我们首先向store发送一个requestUser action，用于告知store有一个用户数据的请求正在进行中。

接着，我们使用fetch API向服务器发送一个异步请求，获取到数据后，将其转换成json格式，并使用dispatch发送一个receiveUser action，用于告知store已经获取到了用户数据。

在receiveUser action中，我们将获取到的json数据中的用户对象指定为action中的user属性，并将对应的userId也指定为action的userId属性。同时，我们还将当前时间指定为action的receivedAt属性，用于记录数据的获取时间。

通过这种方式，我们就可以轻松地实现action的异步返回json数据了。希望本文能对大家在实际的web开发中有所帮助。