Реактивные опоры отображаются как пустые при первой загрузке после изменения - PullRequest
Новая
       29

Реактивные опоры отображаются как пустые при первой загрузке после изменения

0 голосов
/ 26 октября 2019

У меня есть приложение, которое выполняет следующие действия:

  • Пользователь добавляет новую валюту к учетной записи
  • HTTP-запрос отправляется на сервер
  • Затем this.props.refreshSession обновленияthe props
  • Затем перенаправьте на страницу, которая требует, чтобы в реквизитах присутствовал выбор валюты.

Я думаю, что проблема может быть связана с последним шагом. Может быть, моя then функция срабатывает рано? Я добавил return Promise.resolve() в свое действие refreshSession, чтобы оно могло быть связано с then и перенаправлено только после его завершения.

Код шага # 1, добавляющий валюту: 

fetch(appConfig.apiUri + "/currency", {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': authHeader,
  },
  body: JSON.stringify(userJSON)
})
.then(response => response.json())
.then(response => {
  this.props.refreshSession().then(
    () => this.setState({redirect: true})
  )
})

Код шага № 2 this.props.refreshSession: 

export function refreshSession () {
  return (dispatch) => {
    return cognitoUtils.getCognitoSession()
        .then((session) => {
        axios.post(appConfig.apiUri + "/users", session.user,
        { headers: {"Authorization" : `Bearer ${session.credentials.accessToken}`} })
          .then(res => {
            new Promise(function(resolve, reject) {
              console.log("User data updated");
              session.userData = res.data.user;
              dispatch({ type: SET_SESSION, session })
              return Promise.resolve();
            });
          });
      })
  }
}

Шаг № 3 

if(this.props.session.userData) {
  if(this.props.session.userData.claimed) {
    claimedType = this.props.session.userData.claimed[getUrlParameter('type').toUpperCase()];
    // above line breaks, with error that amount is undefined

Тем не менее, если я посмотрю в расширении Redux dev tool, я вижу, что данные, которые я пытаюсь использовать в подпорке, похоже, присутствуют.

enter image description here

Если я обновлю страницу, она сразу заработает.

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

Обновление: Полагаю, я хотел бы вернуть разрешение обещания после завершения dispatch({ type: SET_SESSION, session }), а не одновременно с ним. Я до сих пор не знаю, как это реализовать.

Код для редуктора: 

const session = (state = initialState, action) => {
  switch (action.type) {
    case SET_SESSION:
      return Object.assign({},
        action.session,
        { isLoggedIn: true })

    case CLEAR_SESSION:
      return initialState

    default:
      return state
  }
}
...