TypeError： undefined 不是对象(评估 'state.selectedData.push') - 无法使用 Redux Toolkit 将有效负载添加到状态

Question

我在使用Redux Toolkit时遇到问题。我想把一个名为selectedData的对象推到我的初始状态，它是一个数组，这给了我错误"；TypeError:undefined不是对象(正在评估"state.selectedData.prush"("。

我一直在关注https://redux-toolkit.js.org/usage/immer-reducers他们写的还原逻辑和我写的一样。我不知道为什么它对我不起作用。

他们的代码示例：

const todosSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
todoAdded(state, action) {
// "Mutate" the existing state, no return value needed
state.push(action.payload)
},
todoDeleted(state, action.payload) {
// Construct a new result array immutably and return it
return state.filter(todo => todo.id !== action.payload)
}
}
})

我的代码

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const exerciseItemSlice = createSlice({
name: "exerciseItem",
initialState: { selectedData: [] },
reducers: {
saveSelectedItemIdsToRedux: (state, action) => {
state.selectedData.push(action.payload);
},
resetSelectedItemIds(state, action) {
return state.itemSelectedData;
}
},
}

);
// Action creators are generated for each case reducer function
export const { saveSelectedItemIdsToRedux, resetSelectedItemIds } = exerciseItemSlice.actions;

export default exerciseItemSlice.reducer;

唯一的区别是，我正在传递一个名为selectedData的状态，我也只尝试过initialState。

编辑：用所有相关代码更新，因为问题不能用上述代码复制，这表明问题应该在其他地方

rootReducer.js

import counterReducer from "./counterSlice";
import texterReducer from "./testSlice";
import setsTextReducer from "./setsTextSlicer";
import templateReducer from "./templateSlice";
import setsScreenReducer from "./setsScreenSlice";
import exerciseBrowserReducer from "./exerciseBrowserSlice";
import exerciseItemReducer from "./exerciseItemSlice";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
counter: counterReducer,
texter: texterReducer,
setsText: setsTextReducer,
template: templateReducer,
setsScreen: setsScreenReducer,
exercise: exerciseBrowserReducer,
exerciseItem: exerciseItemReducer,
});
export default rootReducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from 'redux-persist'
import AsyncStorage from "@react-native-async-storage/async-storage";
import rootReducer from "./rootReducer";
const persistConfig = {
key: 'root',
version: 1,
storage: AsyncStorage,
//blacklist: [rootReducer.exerciseItem]
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
// https://github.com/reduxjs/redux-thunk
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
})
});
export const persistor = persistStore(store);
export { store };

更新

我做了很好的旧删除和重新添加，现在它工作了。重命名切片/减速器，因为它与另一个组件同名(感觉很奇怪，但这可能是问题所在？(。我已经将我的旧代码与现在工作的代码进行了比较，但我找不到任何区别，所以我最好的选择是重命名是问题所在。

Answer 1

Redux持久化按保存在异步存储中的顺序序列化(转换为字符串(您的状态数据。序列化后，不能访问包含Array.push的数组方法。

在使用数组方法之前，请尝试分析数组。

saveSelectedItemIdsToRedux: (state, action) => {
const serializedData = JSON.parse(state.selectedData)
state.selectedData = serializedData.push(action.payload);
}

注意：JSON.parse在处理带有嵌套对象的数组时有时会失败。

Answer 2

希望这能有所帮助！删除箭头功能并像一样使用

export const exerciseItemSlice = createSlice({
name: "exerciseItem",
initialState: { selectedData: [] },
reducers: {
// below line is the change
saveSelectedItemIdsToRedux(state, action){
state.selectedData.push(action.payload);
},
resetSelectedItemIds(state, action) {
return state.itemSelectedData;
}
},
}

Answer 3

我遇到了同样的问题，并解决了这个问题：使用redux工具包，每个reducer都拥有自己的状态切片，所以在中调用state时

state.selectedData.push(action.payload);

您实际上正在调用State=>selectedData=>selectedData which is undefined

对于使用createSlice API在reducer的函数中使用selectedData，只需调用state，它意味着state=>选择的数据。

那么您必须从此更改：

reducers: {
saveSelectedItemIdsToRedux: (state, action) => {
state.selectedData.push(action.payload);
},
resetSelectedItemIds(state, action) {
return state.itemSelectedData;
}
},

到这个

reducers: {
saveSelectedItemIdsToRedux: (state, action) => {
state.push(action.payload);
},
resetSelectedItemIds(state, action) {
return state;
}
},

它将工作：-D