Состояние не обновляется после отправки действия

Question

Я новичок в Redux. Мне нужно отправить действие, чтобы обновить состояние моего приложения, а затем использовать состояние updated , чтобы вызвать мой бэкэнд. Я использую thunkMiddleware.

const mapDispatchToProps = dispatch => bindActionCreators({
    login: (user) => dispatch => {
        dispatch(loginAction())
        console.log('user.loggedIn after loginAction dispatching is', user.loggedIn)
    }
}, dispatch)

Я ожидаю, что немедленно после вызова dispatch моего состояния (и всех реквизитов, сопоставленных с ним) получит обновленное значение. Однако этого не происходит: код после вызова dispatch все еще наблюдает состояние до обновления (т.е. в моем примере false выводится на консоль).

По замыслу, даже если я отправляю действие для обновления состояния, я не наблюдаю обновленное состояние в той же функции? Или я что-то не так делаю? Заранее спасибо!

Проект репродукции доступен здесь .

Answer 1

Как уже упоминалось, отправка не является немедленной. Компонент должен будет дождаться отправки реквизита в следующем рендере. Я бы предложил перенести любую логику нужных непосредственных значений в сам редуктор:

export const loginAction = () => {
  return (dispatch, getState) => {
    //Do your login stuff
    getState().user.loggedIn // = false
    dispatch(setUserLoggedIn(true))
    getState().user.loggedIn // = true
    //Make my back end calls
  }
}

Answer 2

Два других комментария по крайней мере частично неверны.

Отправка действия по умолчанию 100% синхронна, при условии, что промежуточное ПО не перехватывает действие и не задерживает его. Как только dispatch() возвращается, состояние хранилища было обновлено. Пример @ageoff верен в том смысле, что вы можете снова вызвать getState() в thunk после отправки и увидеть обновленное состояние.

В вашем примере кода есть две проблемы.

Во-первых, после отправки React не имел возможности повторно выполнить рендеринг, поэтому реквизиты компонента не изменились.

Во-вторых, ваш редуктор должен возвращать новый объект в ответ на действие, поэтому существующий объект user будет , а не обновленной ссылкой. На самом деле, если вы правильно делаете неизменные обновления, этот старый объект user никогда не изменится . Когда компонент повторно рендерится, он должен получить новое значение для props.user с изменениями.

Answer 3

dispatch является асинхронным, если код входа в систему обещает возврат, вы можете вызвать .then на действии, но было бы лучше подумать о том, как еще вы можете добиться того же.

Документы, связанные упоминание

Это было полностью синхронно. Каждый раз, когда отправлялось действие, состояние немедленно обновлялось.

что может быть источником путаницы? Мгновенное обновление относится к следующему состоянию, которое вы должны быть в состоянии наблюдать в компоненте или mapStateToProps