Question

我有一个组件会在componentDidMount上触发获取请求（在redux中）。在同一组件中，我需要使用第一个响应数据（最好是在渲染之前）触发另一个redux fetch请求。

由于在redux操作中执行了获取操作，因此我无法在componentDidMount中使用诺言来完成此操作，因为诺言在操作开始且未完成时就解决了。

在研究中，我认为可以使用componentWillRecieveProps做到这一点，但是我还不完全了解该方法，并且还读到该钩子即将贬值。

任何帮助将不胜感激。

第一个动作：

componentDidMount(){    
 this.props.onGetSessionId(this.parseToken(this.props.location.search))
};

secondAction：

this.props.onFetchFavourites(this.props.sessionId)

Answer 1

在onGetSessionId中，您可以返回承诺，如下所示：

function onGetSessionId(param) {
    return new Promise((resolve, reject) => {
        apiClient.call()
            .then(data => {
                resolve(data);
            })
            .catch(error => {
                reject(error)
            })
    })
}

，然后在componentDidMount中：

componentDidMount(){
    this.props.onGetSessionId(this.parseToken(this.props.location.search))
        .then(data => {
            // ... do stuff with returned data
        })
}

Answer 2

在不了解如何实现onGetSessionId和onFetchFavourites的代码的情况下很难在这里提供帮助，但是假设您正在使用redux-thunk，则可能是这样的：

function getSessionId(token) {
  return function (dispatch) {
    return fetchSessionId(token)
    .then(
      response => dispatch(getSessionIdSuccess(forPerson, response.id))
    )
    .catch(
      error => dispatch(getSessionIdFailure(error)
    )
  };
}

function getFavorites(sessionId) {
  return function (dispatch) {
    return fetchFavorites(sessionId)
    .then(
      response => dispatch(getFavoritesSuccess(sessionId, response.favorites))
    )
    .catch(
      error => dispatch(getFavoritesFailure(error)
    )
  };
}

fetch返回一个promise，因此您可以保持链接.then并使用前一个then的返回值。这可以让您做类似的事情

function getSessionIdAndFavorites(token) {
  return function (dispatch) {
    return fetchSessionId()
    .then(
      response => {
        dispatch(getSessionIdSuccess(response.id))
        return response.id
      }
    )
    .then(id => {dispatch(getFavorites(id)}
    .catch(
      error => dispatch(getSessionAndFavoritesIdFailure(error)
    )
  };
}

React-Redux-在组件的另一个请求中使用来自componentDidMount中的获取请求的响应

2 个答案: