如何使用弹出对话框和 redux saga 等待成功登录 firebase
How do I wait for successful sign in with firebase using a popup dialoug and redux saga
我有一个弹出对话框,用户可以在其中登录。它可以工作,但是我希望对话框在关闭之前等到登录成功。我也在使用 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,
});
我不知道为什么,但我成功了。我所做的只是删除 emailSignInStart(email, password);
之后的 handleClose 调用,一切正常。没有再调用关闭对话框的地方了,但是登录成功后还是关闭了
我有一个弹出对话框,用户可以在其中登录。它可以工作,但是我希望对话框在关闭之前等到登录成功。我也在使用 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,
});
我不知道为什么,但我成功了。我所做的只是删除 emailSignInStart(email, password);
之后的 handleClose 调用,一切正常。没有再调用关闭对话框的地方了,但是登录成功后还是关闭了