Redux工具包和React本机类型错误:undefined不是对象

thigvfpy  于 2023-01-26  发布在  React
关注(0)|答案(1)|浏览(194)

我是新的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 };

我正在尝试将数据持久化到本地存储中

q3aa0525

q3aa05251#

切片名称为“favoriteData”。从状态调用收藏夹时,应使用state.favoriteData.favorites,而不是state.favorites.favorites
修复此代码:

export const favoriteStateData = (state: IFavoriteState) =>
  state.favoriteData.favorites  // use this here

希望能有所帮助

相关问题