Неверное значение хранилища при вызове сразу после вызова синхронного действия

Question

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

При нажатии кнопки я запускаю действие, подобное этому:

submit = () => {
 this.props.updateChallengeStatus(this.props.password);
 alert(this.props.challengeValidated)
};

challengeValidated и пароль привязаны к реквизиту благодаря методу редукса mapStateToProps, например:

const mapStateToProps = (state) => ({
    password: state.password.value,
    challengeValidated: state.challenge.challengeValidated
});

updateChallengeStatus связан с реквизитом благодаря mapDispatchToProps метод редукции, подобный так:

const mapDispatchToProps = dispatch => ({
    updateChallengeStatus: passwordValue => dispatch(updateChallengeStatus(passwordValue))
});

Я проверил, passwordValue правильно передается отправленному действию.

Мое избыточное действие определяется так:

export function updateChallengeStatus(passwordValue){
    const credential = "c2VrdXJpdGF5";
    const challengeValidated = passwordValue === atob(credential);
    return {
        type: VALIDATE_CHALLENGE,
        payload: challengeValidated
    }
}

и мой редуктор:

function challengeReducer(state = {challengeValidated: false}, action){
    switch (action.type) {
        case VALIDATE_CHALLENGE:
            return Object.assign({}, state, {
                challengeValidated: action.payload
            });
        default:
            return state
    }
}

Здесь я устанавливаю начальное состояние challengeValidated на false, а затем, когда моё действие отправляется, заменим значение challengeValidated на полезную нагрузку действия.

По некоторым причинам мое предупреждение продолжает отображать false . Хотя я на самом деле уверен, что мое состояние меняется, так как я использую response-devtools, и мой challengeValidated фактически устанавливается в true в конце процесса. Я подумал, что это может быть потому, что dispatch является асинхронным вызовом, но после прочтения документации кажется, что это не так.

Answer 1

Вы пытаетесь просмотреть содержимое реквизита компонента React сразу после отправки действия. Вы не можете этого сделать - у React еще не было возможности фактически перерисовать и обновить, потому что вы все еще находитесь в процессе выполнения текущего обработчика щелчков. Таким образом, this.props.whatever останется таким же, каким оно было, когда функция начала выполняться.