Redux Toolkit:显示为Proxy的状态/[[Handler]]:null，[[Target]]:null、[

Question

我刚开始反应并遵循教程。每当我删除产品时，它都会在控制台中显示Uncaught (in promise) TypeError: state.userProducts.filter is not a function

当我登录state.products或state.userProducts时，它显示

[[Handler]]: null,
[[Target]]: null,
[[IsRevoked]]:true

这是我的产品Slice.js文件

const productSlice = createSlice({
name: 'products',
initialState: {
product: {},
products: [],
userProducts: [],
error: '',
loading: false,
},
extraReducers: {
[createProduct.pending]: (state, action) => {
state.loading = true;
},
[createProduct.fulfilled]: (state, action) => {
state.loading = false;
state.products = [action.payload];
},
[createProduct.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
[getProducts.pending]: (state, action) => {
state.loading = true;
},
[getProducts.fulfilled]: (state, action) => {
state.loading = false;
state.products = action.payload;
},
[getProducts.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
[getProduct.pending]: (state, action) => {
state.loading = true;
},
[getProduct.fulfilled]: (state, action) => {
state.loading = false;
state.product = action.payload;
},
[getProduct.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
[getProductsByAdmin.pending]: (state, action) => {
state.loading = true;
},
[getProductsByAdmin.fulfilled]: (state, action) => {
state.loading = false;
state.userProducts = action.payload;
},
[getProductsByAdmin.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
[deleteProduct.pending]: (state, action) => {
state.loading = true;
},
[deleteProduct.fulfilled]: (state, action) => {
state.loading = false;
const {
arg: { id },
} = action.meta;
if (id) {
state.userProducts = state.userProducts.filter(
item => item._id != id
);
state.Products = state.Products.filter(
item => item._id != id
);
}
},
[deleteProduct.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
},
});
export default productSlice.reducer;

这是我的仪表板文件，它的另一个文件从mongodb中删除数据，但在单击时不进行过滤，但在刷新页面时它可以工作这是我的仪表板文件

const Dashboard = () => {
const { user } = useSelector(state => ({
...state.auth,
}));
const { userProducts, loading } = useSelector(state => ({
...state.products,
}));
const userId = user?.result?._id;
const adminProduct = userProducts.userProducts;
const dispatch = useDispatch();
useEffect(() => {
if (userId) {
dispatch(getProductsByAdmin(userId));
}
}, [userId]);
const handleDelete = id => {
dispatch(deleteProduct({ id, toast }));
};

getsProductByAdmin

export const getProductsByAdmin = createAsyncThunk(
'products/getProductsByAdmin',
async (userId, { rejectWithValue }) => {
try {
const rData = await API.get(
`http://localhost:---/----/----/${userId}` //userID
).then(res => {
return res.data;
});
return rData;
} catch (err) {
return rejectWithValue(err.response.data);
}
}
);

我到底做错了什么？我还能如何设置状态？

干杯。

Answer 1

所以Immer有点像JSON.stringify，用Object基本上解码Redux在此处声明，而不是未字符串化的对象。

所以基本上做：

import { original } from 'immer'

console.log(original(state.products))

(确保你做了npm i immer(

Answer 2

https://redux-toolkit.js.org/api/createReducer#logging-草稿状态值

开发人员在开发过程中调用console.log(state)是非常常见的。然而，浏览器以难以读取的格式显示代理，这可能会使基于Immer的状态的控制台日志记录变得困难。

使用createSlice或createReducer时，您可以使用我们从immer库重新导出的当前实用程序。此实用程序创建当前Immer的单独纯拷贝Draft状态值，然后可以记录该值以正常查看。

它通过对草稿的当前状态进行快照并最终确定草稿(但不冻结(来实现这一点。电流是在调试期间打印当前状态的一个很好的工具，current的输出也可以安全地泄漏到生产商之外。

import { createSlice, current } from '@reduxjs/toolkit'
const slice = createSlice({
name: 'todos',
initialState: [{ id: 1, title: 'Example todo' }],
reducers: {
addTodo: (state, action) => {
console.log('before', current(state))
state.push(action.payload)
console.log('after', current(state))
},
},
})