React-Redux - использование ответа от запроса на выборку в componentDidMount в другом запросе в компоненте

Question

У меня есть компонент, который запускает запрос на выборку (в избыточном коде) для componentDidMount.В том же компоненте мне нужно запустить еще один запрос на выборку из резервной копии, используя данные ответа из первой, предпочтительно перед рендерингом.

Из-за того, что выборка выполняется в действии из резервной копии, я не смог этого сделатьс обещанием в componentDidMount, поскольку обещание разрешается, когда действие начинается, а не заканчивается.

на исследованиях Я думал, что это можно сделать с помощью componentWillRecieveProps, однако я не до конца понимаю, как и читал этот хукскоро обесценивается.

любая помощь будет принята с благодарностью.

первое действие:

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

secondAction:

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

Answer 1

Сложно помочь, не видя код для реализации 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 возвращает обещание , так что вы можете просто продолжать цепочку .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)
    )
  };
}

Answer 2

В 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
        })
}