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

Question

我正在开发 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);
      });
  };

注册用户函数：

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)}`);
})

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

Answer 1

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

The thunks generated by createAsyncThunk will always return a resolved promise with either the fulfilled action object or rejected action object inside, as appropriate.

The calling logic may wish to treat these actions as if they were the original promise contents. Redux Toolkit exports an unwrapResult function that can be used to extract the payload of a fulfilled action or to throw either the error or, if available, payload created by rejectWithValue from a rejected action:

import { unwrapResult } from '@reduxjs/toolkit'

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

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

React and Redux toolkit - reject after promise

reactjs

react-native

redux

redux-thunk

react-redux