reactjs - Redux-Saga 不使用 redux-saga-firebase 等待操作完成
问题描述
我正在使用 redux-saga-firebase 包来执行一些 firebase/auth 操作,但问题是调度后的代码在调度完成之前执行。例如:
dispatch({ type: 'SIGNIN_WITH_EMAIL_AND_PASSWORD_REQUESTED', email: 'test@test.com', password: 'qwerty123@'})
console.log(`propsUser: ${this.props.user.currentUser}`);
Saga.js
function* signInWithEmailAndPassword(data) {
try {
const user = yield call(reduxSagaFirebase.auth.signInWithEmailAndPassword, data.email, data.password);
yield put({ type: SIGNIN_WITH_EMAIL_AND_PASSWORD_SUCCEEDED, currentUser: user });
}
catch (error) {
yield put({ type: SIGNIN_WITH_EMAIL_AND_PASSWORD_FAILED, message: error.message });
}
}
export default function* userRootSaga() {
//yield fork(syncUserSaga)
yield all([
takeLatest(SIGNIN_WITH_EMAIL_AND_PASSWORD_REQUESTED, signInWithEmailAndPassword),
])
}
减速器
case SIGNIN_WITH_EMAIL_AND_PASSWORD_SUCCEEDED:
console.log(`action: ${Object.values(action)}`); //here I get the correct user the second time
return { ...state, currentUser: action.currentUser }
在那种情况下,当我第一次按下按钮时 this.props.user.currentUser 是未定义的,但是如果我在两三秒后再次按下它,我会得到用户对象。在调用 reducer 之前如何等待操作完成?
解决方案
case SIGNIN_WITH_EMAIL_AND_PASSWORD_REQUESTED:
return { ...state, isLoading: true, isLoaded: false }
case SIGNIN_WITH_EMAIL_AND_PASSWORD_REQUESTED:
return { ...state, isLoading: false, isLoaded: true, currentUser: action.currentUser }
然后你需要渲染登录按钮,如:
<LoginButton disabled={isLoading}>
推荐阅读
- vue.js - Vue.js - 拖放/合并
- typescript - TypeScript 3.1:如何在严格模式下使用枚举索引数组?
- c# - 无法在静态上下文中访问非静态字段
- javascript - “等待”异步迭代中的“睡眠”执行(ES2018)
- python - 格式良好的 XML 在 zip 文件中读取时抛出 XMLSyntaxError
- android - 即使从最近的任务中清除应用程序,Android 也会继续下载
- node.js - 员工层次结构的递归函数(nodejs)
- javascript - Promise 函数中的 Promise:无法将数据推送到数组中
- javascript - JS 异步函数停止页面加载
- python - 删除字符串中每个句子中特定符号后的单词