Почему .then () не определен в избыточном обещании?

Question

Я пытался вызвать событие после обновления избыточного состояния, поэтому я выполнил обещание .then вот так

logoutHandler = (event) => {
    console.log("logout Handler")
    event.preventDefault()
    window.FB.logout()
    this.props.LoggedIn(false).then(() => {
        this.props.history.replace('/signup');
    })
}

Обратите внимание на это ..

  this.props.LoggedIn(false).then(() => {
            this.props.history.replace('/signup');
        })

Где .LoggedIn(false) является избыточным действием.

Это выдает ошибку

Невозможно прочитать свойство 'then' из неопределенного

Это моё редукционное действие

export const LoggedIn  = (isLoggedIn) => {
  return function (dispatch) {
    dispatch({
      type: USER_LOGGED_IN ,
      payload: isLoggedIn
    })
  }
}

Вопрос: Может кто-нибудь сказать мне, что я буду делать неправильно здесь

Answer 1

Для реализации всего, что связано с обновлением состояния, вы можете использовать метод реагирования жизненного цикла componentDidUpdate ().всякий раз, когда избыточный редуктор возвращает новое состояние, все реагирующие приложения перерисовываются.После рендеринга метод componentDidUpdate выполняется для каждого компонента.

componentDidUpdate () вызывается сразу после обновления.Этот метод не вызывается для начального рендеринга.

componentDidUpdate() {
  if (condition) {
     this.props.history.replace('/signup');
  }
}

https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 2

Вам нужно вернуть Обещание.

Так что вместо этого сделайте что-то вроде этого:

logoutHandler = (event) => {
  event.preventDefault()
  window.FB.logout()
  return this.props.LoggedIn(false).then(() => {
    this.props.history.replace('/signup');
    return Promise.resolve(); // Just return a resolved promise
  })
}

Answer 3

Согласно redux-thunk документу, вы должны вернуть Promise из вашей внутренней функции, чтобы использовать .then с действием.

Любое возвращаемое значение из внутренней функции будет доступно каквозвращаемое значение самой отправки.Это удобно для организации асинхронного потока управления, когда создатели групповых действий отправляют друг другу и возвращают Обещания, чтобы дождаться завершения друг друга:

Взгляните на документ здесь .

Возможный код уже предоставлен Shubham Khatri

Answer 4

Ваше действие Redux не возвращает обещание.Либо вы можете создать и вернуть новое Обещание

export const LoggedIn  = (isLoggedIn) => {
  return function (dispatch) {
    return new Promise((resolve, reject) => {
         dispatch({
             type: USER_LOGGED_IN ,
             payload: isLoggedIn
         })
         resolve();
    })
  }
}

, либо выполнить, history.replace изнутри самого действия приведения

export const LoggedIn  = (isLoggedIn, history) => {
  return function (dispatch) {
    dispatch({
      type: USER_LOGGED_IN ,
      payload: isLoggedIn
    });
    history.replace('/signup');
  }
}


logoutHandler = (event) => {
    console.log("logout Handler")
    event.preventDefault()
    window.FB.logout()
    this.props.LoggedIn(false, this.props.history);
}