redux工具包：createSyncthunk- recublwithValue -typeError：无法破坏属性; ＆＃x27; ref2＆＃x27;由于不确定。”

Question

我一直在尝试使用Redux Toolkit进行Auth Refresh代币呼叫，但是在安装所有修复程序后，它仍然可以读取错误消息。

设置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 slice中的额外还原器：

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 = [];
      })
  },

我能够要查看浏览器控制台中的错误，但是recuplwithMessage不起作用：

控制台输出：

redux输出：

在登录页面上通过使用效率将用户重定向到他来自的位置，以防万一他已经登录了。

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

传递给回调函数的第一个参数您给出 createSyncthunk 是您调用操作时通过的参数。
在这里查看此处以获取更多信息。第二个参数是 thunkapi thunkapi 包含 recondwithValue 。尝试将虚拟参数作为回调的第一个参数 -

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

Answer 2

export const canLogin = createAsyncThunk("AUTH/login", 
async (loginData ,{ rejectWithValue })=> {
    try{
        const response=await axios.post(AuthConfig.API_URL + AuthConfig.LOGIN_URI, loginData)
        return response
    }
    catch(error){
        if (!error.response || !error.message) 
            throw error
        return rejectWithValue(getErrorMessage(error))
    }    
  }
);

export function getErrorMessage(error) {
    return (
      error?.response?.data?.message ||
      error?.response?.data.error ||
      error?.response?.data ||
      error?.message ||
      error.toString()
    );
}