reactjs - 如何使用弹出对话框和 redux saga 等待成功登录 firebase

问题描述

我有一个弹出对话框，用户可以在其中登录。它可以工作，但是我希望对话框等到登录成功后再关闭。我也在使用 Redux，我尝试在 emailSignInStart(email, password) 之前添加 await 但这不起作用。这是我的登录表格：

const SigninForm = ({ emailSignInStart, handleClose }) => {
    const { switchToSignup } = useContext(AccountContext);
    const [userCredentials, setCredentials] = useState({
        email: '',
        password: '',
    });
    const { email, password } = userCredentials;

    const signIn = async event => {
        event.preventDefault();
        try {
            emailSignInStart(email, password);
            handleClose(); <---------------------- Don't call this until sign in successful
        } catch(error){
            
        }
    };

    const handleChange = event => {
        const { value, name } = event.target;
        setCredentials({ ...userCredentials, [name]: value });
    };

    return <BoxContainer>
        <Marginer direction={'vertical'} margin={15} />
        <FormContainer>
            <Input name={'email'} type={'email'} onChange={handleChange} placeholder={'Email'} />
            <Input name={'password'} type={'password'} onChange={handleChange} placeholder={'Password'} />
            <Marginer direction={'vertical'} margin={10} />
            <MutedLink href={'#'}>Forgot Password?</MutedLink>
            <Marginer direction={'vertical'} margin={'1.6em'} />
            <Submit type={'submit'} onClick={signIn}>Sign In</Submit>
            <Marginer direction={'vertical'} margin={'1em'} />
            <MutedLink href={'#'}>
                Don't have an account?
                <BoldLink href={'#'} onClick={switchToSignup}>Sign Up</BoldLink>
            </MutedLink>
        </FormContainer>
    </BoxContainer>;
};

const mapDispatchToProps = dispatch => ({
    emailSignInStart: (email, password) =>
        dispatch(emailSignInStart({ email, password })),
});

export default connect(null, mapDispatchToProps)(SigninForm);

在我的用户传奇中，我有：

export function* getSnapshotFromUserAuth(userAuth, additionalData) {
    try {
        const userRef = yield call(
            createUserProfileDocument,
            userAuth,
            additionalData
        );
        const userSnapshot = yield userRef.get();
        yield put(
            signInSuccess({ id: userSnapshot.id, ...userSnapshot.data() })
        );
    } catch (error) {
        yield put(signInFailure(error.message));
    }
}

export function* signInWithEmail({ payload: { email, password } }) {
    try {
        const { user } = yield auth.signInWithEmailAndPassword(email, password);
        yield getSnapshotFromUserAuth(user);
        return user;
    } catch (error) {
        yield put(signInFailure(error.message));
    }
}

export function* onEmailSignInStart() {
    yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START, signInWithEmail);
}

在我的用户操作中，我有：

export const emailSignInStart = emailAndPassword => ({
    type: UserActionTypes.EMAIL_SIGN_IN_START,
    payload: emailAndPassword,
});

export const signInSuccess = user => ({
    type: UserActionTypes.SIGN_IN_SUCCESS,
    payload: user,
});

export const signInFailure = error => ({
    type: UserActionTypes.SIGN_IN_FAILURE,
    payload: error,
});

标签： reactjsfirebase-authenticationdialogredux-saga

reactjs - 如何使用弹出对话框和 redux saga 等待成功登录 firebase

问题描述

解决方案

推荐阅读