等待生成器在 redux-saga 中完成答案

【问题标题】：await of generator completing in redux-saga等待生成器在 redux-saga 中完成
【发布时间】：2021-09-17 08:52:09
【问题描述】：

我在组件中有代码，我需要在函数中获取更新的 authorizedError 值，但我得到旧值授权错误

//登录组件


const authorizedError = useSelector((state: RootState) => state.user.authorizedError);

const onSignInPress = useCallback(async () => {
            await dispatch(userActions.postLoginUser({username: email, password}));
  if (authorizedError) {
            setNotificationErrors(['Wrong login or password'])
            showNotification();
        }

    }, [authorizedError, validate, email, password]);

// postLoginUserSaga.js

export default function* postLoginUserSaga({
  payload,
}: PayloadAction<UserCredentialsPayload>) {
  try {
    yield put(setSignInError(false));
    const {
      data: {
        payload: { access_token },
        status,
      },
    } = yield transport.post(URLS.postLoginUserURL, payload);
    if (status !== "Ok") {
      throw new Error(status);
    }
    yield setItemAsync(ACCESS_TOKEN_KEY, access_token);
    yield put(setSignIn(true));
  } catch (error) {
    console.error("User login failed", error);
    yield put(setSignInError(true));
  }
}

// sagaRoot 文件

export default function* userRootSaga() {
  yield all([
    checkAuthSaga(),
    takeEvery(actions.postLoginUser, postLoginUserSaga),
    takeEvery(actions.postRegistrationUser, postRegistrationUserSaga),
    takeEvery(actions.getProfileData, getProfileDataSaga),
  ]);
}

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs redux redux-saga saga

【解决方案1】：

Redux 操作不返回承诺，你不能像这样使用它们。

如果你想使用 promise API，你可以使用支持它的 redux-thunk 中间件。

如果你想使用 sagas，你可以添加一个回调动作属性。

// in component callback
dispatch(userActions.postLoginUser({username: email, password, callback: (authorizedError) => {
  if (authorizedError) {
    setNotificationErrors(['Wrong login or password'])
    showNotification();
  }
}));

// in saga
try {
  ...
  action.callback();
} catch (err) {
  action.callback(err);
}

虽然它有自己的issues。

通常您通过更改 redux 状态从 sagas 与组件进行通信，因此您可以例如有一个 redux error 的状态，如果登录成功，则基于该字段显示错误消息或显示不同的组件。

【讨论】：