我是新的redux,redux工具包,我得到了一个错误信息,我真的很难处理,但我需要一些帮助。任何帮助将不胜感激。提前感谢
我的错误:
错误类型错误:undefined不是对象(评估"state. favorites. favorites")
我的代码:
reducer.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { IFavorite, MEATPROPS, IFavoriteState } from "../../../types/meat";
const initialState = {
favorites: [],
};
const FavoriteData = createSlice({
name: "favoriteData",
initialState,
reducers: {
addNewFavoriteCharacter: (
state: IFavorite,
action: PayloadAction<MEATPROPS>
) => {
state.favorites = [...state.favorites, action.payload];
},
removeFavoriteCharacter: (
state: IFavorite,
action: PayloadAction<number>
) => {
state.favorites = state.favorites.filter(
(item) => item.id !== action.payload
);
},
},
});
export const { addNewFavoriteCharacter, removeFavoriteCharacter } =
FavoriteData.actions;
export const favoriteStateData = (state: IFavoriteState) =>
state.favorites.favorites;
export default FavoriteData.reducer;
app.tsx
import React, { useCallback } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { AppNavigation } from "./src/appNavigation";
import { useFonts, Poppins_500Medium } from "@expo-google-fonts/poppins";
import * as SplashScreen from "expo-splash-screen";
import { Provider } from "react-redux";
import {PersistGate} from 'redux-persist/es/integration/react';
import { persistor, store } from "./src/store";
export default function App() {
const [fontsLoaded] = useFonts({
Sangharia: require("./src/fonts/Sangharia.ttf"),
Poppins_500Medium: Poppins_500Medium,
});
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return null;
}
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}></PersistGate>
<SafeAreaProvider onLayout={onLayoutRootView}>
<AppNavigation />
</SafeAreaProvider>
</Provider>
);
}
types.ts
export interface MEATPROPS {
id: number;
meatType: "Beef" | "Pork" | "Sheep" | "Chicken";
image?: any;
name: string;
simplifiedDescription?: string;
fullDescription?: string;
countriesNaming?: countries;
bestTo: string[];
popularity?: "baixa" | "tradicional" | "alta";
nutriFact?: Nutrition;
}
export interface IFavorite{
favorites: MEATPROPS[]
}
export interface IFavoriteState{
favorites:{
favorites: MEATPROPS[]
}
}
贮藏
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 favoriteData from "./modules/Favorites/reducer";
const persistConfig = {
key: "root",
storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, favoriteData);
const store = configureStore({
reducer: {
favoriteData: persistedReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
});
const persistor = persistStore(store);
export { store, persistor };
我正在尝试将数据持久化到本地存储中
1条答案
按热度按时间q3aa05251#
切片名称为“favoriteData”。从状态调用收藏夹时,应使用
state.favoriteData.favorites
,而不是state.favorites.favorites
修复此代码:
希望能有所帮助