Redux-Saga 不使用 redux-saga-firebase 等待操作完成答案

【问题标题】：Redux-Saga is not waiting for action to complete using redux-saga-firebaseRedux-Saga 不使用 redux-saga-firebase 等待操作完成
【发布时间】：2020-12-23 16:38:13
【问题描述】：

我正在使用 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 之前等待操作完成？

【问题讨论】：

请自带一个可以工作的sn-p，如果你有一个sn-p可以清楚地显示你的问题，它会比没有sn-p更快地解决你的问题，例如，你可以从代码沙箱创建一个 sn-p
dispatch 调用的 saga 工作方式为 asnyc（我猜，因为您点击了另一台服务器上的 firebase）。因此，如果您想等待用户登录，则必须等待SIGNIN_WITH_EMAIL_AND_PASSWORD_SUCCEEDED 操作。最好的方法是在你的组件中检查一个有效的state.currentUser。
但是只有当我有一个有效的对象时我才能继续执行？我应该检查一个while循环还是我能做什么？
你在使用 React 吗？您可以在使用 Firebase 时渲染“后备”或“加载”组件。 return user ? <Profile user={user} /> : <Loading /> 之类的东西，或者您喜欢这样做（假设这些组件已定义）。

标签： reactjs firebase redux redux-saga

【解决方案1】：

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

【讨论】：