Получение обновленного состояния сразу после обновления состояния сразу после отправки внутри компонента

Question

Я делаю авторизационный вызов для входа в систему из Redux Saga, поэтому в JSX я могу ждать обновления состояния с помощью условного рендеринга, но как мне ждать его, например, ex.onSubmit функция, чтобы я мог перенаправить, если вход в систему успешен.

Я использую условные операторы, чтобы проверить, вошел ли пользователь в систему или нет в функции onSubmit сразу после отправки props.login(values), но я получаю более старое состояние, в котором isLoggedIn установлено в false.

Вход в систему

    <Formik
        initialValues={{
            email: '',
            password: '',
        }}
        validationSchema={LoginSchema}
        onSubmit={(
            values,
            { setSubmitting, resetForm },
        ) => {
            props.login(values);
            setTimeout(() => {
                if(props.isLoggedIn) {
                    props.history.push('/'); // Functional Component
                } else {
                    resetForm();
                }
                setSubmitting(false);
            }, 500);
       }}
    >

Начальное состояние

const initialState = {
    currentUser: {},
    isLoggedIn: false,
    errors: '',
    propertyMessages: '',
};

Редукторы

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case AUTH: {
            if (action.payload.error) {
                return {
                    ...state,
                    errors: action.payload.error,
                };
            } else {
                localStorage.setItem('access-token', action.payload);
                const user = jwtDecode(action.payload);
                return {
                    ...state,
                    errors: '',
                    isLoggedIn: true,
                    currentUser: {
                        id: user.id,
                        name: user.name,
                    },
                };
            }
        }
        case LOGOUT: {
            localStorage.removeItem('access-token');
            return {
                ...state,
                isLoggedIn: false,
                currentUser: {},
                errors: '',
            };
        }
        default:
            return state;
    }
};

Redux Saga

function* loginSaga(payload) {
    try {
        const data = yield call(loginCall, payload); // Get token
        yield put({ type: AUTH, payload: data });
    } catch (e) {
        console.log(e);
    }
}

The isLoggedIn устанавливается равным true сразу после отправки props.login(values), но поскольку логика перенаправления выполняется сразу после диспетчера, если get вызывается со старым состоянием.

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

Answer 1

Насколько я понимаю вашу проблему, вы должны сделать props.login удобочитаемым, то есть обещанием. Верните обещание из функции входа в систему и поместите логику if в then что-то вроде этого. Подробнее об этом можно узнать, если вы поделитесь своим логином.

onSubmit={(
            values,
            { setSubmitting, resetForm },
        ) => {
            props.login(values)
              .then(() => {
                if(props.isLoggedIn) {
                    props.history.push('/'); // Functional Component
                } else {
                    resetForm();
                }
                setSubmitting(false);
              })
       }
      }

Answer 2

Нашли решение

componentDidUpdate(prevProps) {
        if (this.props.currentUser !== prevProps.currentUser) {
            this.props.history.push('/');
        }
    }