Redux 工具包：createAsyncThunk -rejectWithValue -TypeError：无法解构“_ref2”的属性“rejectWithValue”，因为它未定义。”

Question

我一直在尝试使用 Redux 工具包进行身份验证刷新令牌调用，但在安装所有修复程序后，它现在仍然能够读取错误消息。

设置 axios 实例：

export const axiosInstance = axios.create({
  baseURL: REACT_APP_API_URL,
});

进行API调用：

export const refreshAccessAndRefreshTokens = async () => {
  const response = await axiosInstance({
    method: 'post',
    url: '/refresh-tokens',
    withCredentials: true,
  });
  return response;
};

thunk函数：

// GET ACCESS TOKEN USING REFRESH TOKEN
export const refreshTokens = createAsyncThunk(
  'auth/refreshTokens',
  async ({ rejectWithValue }) => {
    try {
      const response = await refreshAccessAndRefreshTokens();
      return response.data;
    } catch (error) {
      console.log('error', error);
      console.log('data', error.response.data);
      console.log('message', error.response.data.message);
      return rejectWithValue(error.response.data.message);
    }
  }
);

auth 切片中的额外减速器：

extraReducers: (builder) => {
    builder
      .addCase(refreshTokens.pending, (state) => {
        state.loading = true;
      })
      .addCase(refreshTokens.fulfilled, (state, action) => {
        state.loading = false;
        state.isAuthenticated = true;
        state.user = action.payload.user;
        state.roles = action.payload.roles;
      })
      .addCase(refreshTokens.rejected, (state, action) => {
        state.loading = false;
        state.success = false;
        state.message = action.payload;
        state.isAuthenticated = false;
        state.user = null;
        state.roles = [];
      })
  },

我可以在浏览器控制台中看到错误，但rejectWithMessage不起作用：

控制台输出：

还原输出：

通过 useEffect 在登录页面上调用刷新令牌，以将用户重定向到他来自的位置（如果他已经登录）。

useEffect(() => {
    dispatch(refreshTokens());
    dispatch(reset());
  }, [dispatch]);

  useEffect(() => {
    if (isAuthenticated) {
      if (roles.find((role) => role === process.env.REACT_APP_ROLE)) {
        navigate(from, { replace: true });
      } else {
        dispatch(
          errorFn({
            success: false,
            message: 'You are not authorized to access this page!',
          })
        );
      }
    }
  }, [dispatch, from, isAuthenticated, navigate, roles]);

Answer 1

传递给您提供的回调函数的第一个参数createAsyncThunk是您在调用操作时传递的参数。 请查看此处了解更多信息。第二个参数是 ，thunkAPI其中包含rejectWithValue。尝试将虚拟参数作为回调的第一个参数，如下所示 -

// GET ACCESS TOKEN USING REFRESH TOKEN
export const refreshTokens = createAsyncThunk(
  'auth/refreshTokens',
  async (_, { rejectWithValue }) => {
    try {
      const response = await refreshAccessAndRefreshTokens();
      return response.data;
    } catch (error) {
      console.log('error', error);
      console.log('data', error.response.data);
      console.log('message', error.response.data.message);
      return rejectWithValue(error.response.data.message);
    }
  }
);