解决redux报错：Uncaught TypeError: Cannot perform ‘set‘ on a proxy that has been revoked

谁践踏了优雅 2023-10-16 18:08 49阅读 0赞

在react中使用redux toolkit(RTK)写了一个slice, 结果报错：Uncaught TypeError: Cannot perform 'set' on a proxy that has been revoked

![dd5c9d78211945778b5e17ad77eaa3c4.png][]

![2f9e691e70a0435794df09ac4b2fa63f.png][]

**看起来原因似乎是在reducer中使用了setTimeout函数的缘故**

查看了chatGpt给出的解释：

> 在 Redux Toolkit 的 `createSlice` 中，reducers 中的每个 reducer 函数都应该是纯函数，也就是说它们不应该有任何副作用。在你的 `getLoading` reducer 中，你使用了 `setTimeout` 来延迟修改状态，这违反了纯函数的原则，因此可能导致错误。
> 
> 要解决这个问题，你可以将副作用移到 Redux 中间件中，而不是在 reducer 中进行。例如，你可以使用 Redux Thunk 中间件来处理异步操作，以及在操作完成后分发一个 action 来修改状态。
> 
> 首先，确保你已经安装了 Redux Thunk 中间件：

**换句话说： reducer中不能有setTimeout这样的副作用函数，下面的写法是错误的：**

![6c0741a40694459b9b50dc0a27532b6a.png][]

**解决办法： 把setTimeout移到redux Thunk中间件来处理，然后使用extraReducers更新state:**

首先安装redux thunk： yarn add redux-thunk@2.4.1

然后更新代码如下：

> import \{ createSlice, createAsyncThunk \} from "@reduxjs/toolkit";  
> 
> 
> interface UserState \{
> 
> userInfo: Object;
> 
> loading: string | null
> 
> \}
> 
> // 把setTimeout移入到createAsyncThunk中间件异步函数中处理
> 
> export const getLoading = createAsyncThunk(
> 
> "user/getLoading",
> 
> async ( thunkAPI) => \{
> 
> setTimeout(() => \{
> 
> \}, 500);
> 
> return "页面加载完毕";
> 
> \}
> 
> );;
> 
> export const userSlice = createSlice(\{
> 
> name: "user",
> 
> initialState,
> 
> reducers: \{
> 
> \},
> 
> extraReducers: \{
> 
> // 在这里通过getLoading的返回值更新state.loading的值
> 
> \[getLoading.fulfilled.type\]: (state, action) => \{
> 
> state.loading = action.payload;
> 
> \},
> 
> \},
> 
> \});

然后再dispatch派发的时候，**一定不能通过dispatch.actions来派发**，否则会报错：

Uncaught TypeError: userSlice.actions.getLoading is not a function

![9ca9359e80764c04afc88e855cecd254.png][]

而应该通过解构的方式获取函数名，然后再通过dispatch(函数名() )的方式来派发！

![9e993add3ed24dbb95ab1541c43c5db7.png][]

[dd5c9d78211945778b5e17ad77eaa3c4.png]: https://img-blog.csdnimg.cn/dd5c9d78211945778b5e17ad77eaa3c4.png
[2f9e691e70a0435794df09ac4b2fa63f.png]: https://img-blog.csdnimg.cn/2f9e691e70a0435794df09ac4b2fa63f.png
[6c0741a40694459b9b50dc0a27532b6a.png]: https://img-blog.csdnimg.cn/6c0741a40694459b9b50dc0a27532b6a.png
[9ca9359e80764c04afc88e855cecd254.png]: https://img-blog.csdnimg.cn/9ca9359e80764c04afc88e855cecd254.png
[9e993add3ed24dbb95ab1541c43c5db7.png]: https://img-blog.csdnimg.cn/9e993add3ed24dbb95ab1541c43c5db7.png