减速器内部的超高访问状态

Question

我有这样的createslice和reducer。我想在减速器中打印我的状态，因为我的调度工作不正常，但当我试图打印状态时，我得到了这个。

[Proxy]
0: Proxy {}
length: 1
__proto__: Array(0)
export const eventSlice = createSlice({
name: 'event',
initialState: {
event: [],
favouriteEvents: [],
isFetching: false,
isSuccess: false,
isError: false,
errorMessage: '',
},

reducers: {
alterFavourite: (state, action) => {
// item = state.event.filter((item) => {
//   item.pk == parseInt(pk)
// item.is_liked = !is_liked;
// })

console.log(state.event)
},

Answer 1

您可以使用当前函数：

Immer公开一个命名导出current，该导出创建草稿当前状态的副本。这对于调试非常有用(因为这些对象不会是代理对象，也不会被记录为代理对象)。此外，对current的引用可以从生成函数安全地泄漏。换句话说，current提供了草稿当前状态的快照。

RTK使用immer underly并重新导出这些函数。reducer中的状态是一个draft对象，它是JavaScript普通对象的某种包装器或代理。

你可以这样做：

import { configureStore, createSlice, current } from '@reduxjs/toolkit';
export const eventSlice = createSlice({
name: 'event',
initialState: {
event: [],
favouriteEvents: [],
isFetching: false,
isSuccess: false,
isError: false,
errorMessage: '',
},
reducers: {
alterFavourite: (state, action) => {
// console.log(state.event);
console.log('current state.event: ', current(state.event));
},
},
});
const store = configureStore({
reducer: {
event: eventSlice.reducer,
},
});
store.dispatch(eventSlice.actions.alterFavourite(null));

输出：

current state.event:  []

软件包版本："@reduxjs/toolkit": "^1.6.1"