Question

我正在从Redux Saga进行登录auth调用，因此在JSX中，我可以使用条件渲染来等待状态更新，但是如何才能等待状态更新。 onSubmit功能，以便登录成功后可以重定向。

我正在使用条件语句检查用户在分派onSubmit之后是否在props.login(values)函数中登录，但是我得到了将isLoggedIn设置为的较早状态错误。

登录组件

    <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);
    }
}

在isLoggedIn分派之后，true设置为props.login(values)，但是如果使用旧状态调用get，则重定向逻辑就在分派之后。

如果重定向逻辑可以延迟或在有条件渲染的情况下发生，则组件将呈现预期的结果，因为组件将具有更新后的值。

Answer 1

找到了解决方案

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

Answer 2

据我了解您的问题，您需要使props.login可用，即一个承诺。从登录函数返回一个承诺，并将if逻辑放入then中这样的事情。如果您共享登录代码，可以了解更多有关此的信息。

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

在组件内分派状态后立即更新状态后立即获取更新状态

2 个答案: