React 和 Redux 工具包 - 承诺后拒绝答案

【问题标题】：React and Redux toolkit - reject after promiseReact 和 Redux 工具包 - 承诺后拒绝
【发布时间】：2021-08-10 09:54:36
【问题描述】：

我正在开发一个 React Native 应用程序。我有一个注册屏幕，上面有一个按钮，onclick：

const handleClick = (country: string, number: string): void => {
    dispatch(registerUser({ country, number }))
      .then(function (response) {
        console.log("here", response);
        navigation.navigate(AuthRoutes.Confirm);
      })
      .catch(function (e) {
        console.log('rejected', e);
      });
  };

registerUser 函数：

export const registerUser = createAsyncThunk(
    'user/register',
    async ({ country, number }: loginDataType, { rejectWithValue }) => {
        try {
            const response = await bdzApi.post('/register', { country, number });
            return response.data;
        } catch (err) {
            console.log(err);
            return rejectWithValue(err.message);
        }
    },
);

我有一个确实被调用的extraReducers，证明它被有效地拒绝了。

.addCase(registerUser.rejected, (state, {meta,payload,error }) => {
    state.loginState = 'denied';
    console.log(`nope : ${JSON.stringify(payload)}`);
})

但是注册组件得到正常处理，在“这里”记录并导航到确认屏幕。这是为什么呢？

【问题讨论】：

你能显示rejectWithValue吗？您可能需要抛出错误而不是返回它。
@Yousaf 好吧，它在 thunkAPI 的 args 中被解构，如您所见 { rejectWithValue } - 这是 redux 工具包中的一个函数。 redux-toolkit.js.org/api/createAsyncThunk#payloadcreator
我不知道 redux-toolkit 但我的猜测是 returning 来自 catch 块的值是包装函数返回的 implicitly fulfilling the promise。跨度>
你完全正确。如果我只是停止返回并只写rejectWithValue(err.message);，则错误会在组件中捕获。有趣的是，行为不端的是减速器 - 它调用了 registerUser.fulfilled 减速器，而不是在我返回东西时实际调用的 registerUser.rejected！

标签： reactjs react-native redux react-redux redux-thunk

【解决方案1】：

使用createAsyncThunk 创建的 thunk 将始终解析，但如果您想在调度 thunk 的函数中捕获它，则必须使用 unwrapResults。

createAsyncThunk 生成的 thunk 将始终返回一个已解决的 Promise，其中包含已完成的操作对象或被拒绝的操作对象（视情况而定）。

调用逻辑可能希望将这些操作视为原始承诺内容。 Redux Toolkit 导出一个 unwrapResult 函数，该函数可用于提取已完成操作的有效负载或抛出错误，或者如果可用，则从被拒绝的操作中抛出由 rejectWithValue 创建的有效负载：

import { unwrapResult } from '@reduxjs/toolkit'

// in the component
const onClick = () => {
  dispatch(fetchUserById(userId))
    .then(unwrapResult)
    .then(originalPromiseResult => {})
    .catch(rejectedValueOrSerializedError => {})
}

【讨论】：