Hello, I neeed help with this, I don't know what type I should give my props which I want to pass to a redux slice.
I'm getting the error "argument of type 'Meal[]' is not assignable to parameter of type 'Meal'. Type 'Meal[]' is missing the following properties from type 'Meal': _id, _createdAt, _updatedAt, _ref, and 7 more.ts(2345)
import { useEffect } from "react";
import Head from "next/head";
//-=-=-=-=-=-=-=-=-=Type import from next-=-=-=-=-=-=-=-
import type { NextPage, GetServerSideProps } from "next";
//-=-=-=-=-=-=-=-=-=Componenets imports--=-=-=-=-=-=-=-
import { Header } from "../components/header/header";
import { Revolver } from "../components/revolver/revolver";
//-=-=-=-=-=-=-=-=-=-utilties fetches-=-=-=-=-=-=-=-=-=-
import { fetchMeals } from "../util/fetchMeals";
import { fetchCategories } from "../util/fetchCategories";
import { useDispatch } from "react-redux";
import { addMeals } from "../redux/mealsSlice";
import { addCategories } from "../redux/categoriesSlice";
// import { useSelector } from "react-redux";
// import { selectBasketItems } from "../redux/basketSlice";
// import { selectMealsItemsmeals } from "../redux/mealsSlice";
interface Props {
categories: Category[];
meals: Meal[];
}
const Home: NextPage<Props> = ({ categories, meals }: Props) => {
const dispatch = useDispatch();
dispatch(addMeals(meals));
useEffect(() => {
// addAllMeals();
// addAllCategories();
// console.log("loading meals");
}, []);
// const addAllCategories = () => {
// dispatch(addCategories(categories));
// };
// const addAllMeals = () => {};
return (
<>`enter code here`
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<Revolver />
</>
);
};
export default Home;
//-=-=-=-=-=-=-=-=-=-=-=-=- Backend Code=-=-=-=-=-=-=-=-//
export const getServerSideProps: GetServerSideProps<Props> = async () => {
const categories = await fetchCategories();
const meals = await fetchMeals();
return {
props: {
categories,
meals,
},
};
};
//-=-=-=-=-=-=-=-=-=- This the slice I want to pass meals into
import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import type { RootState } from "./store";
// Define a type for the slice state
interface mealsState {
meals: Meal[];
}
// Define the initial state using that type
const initialState: mealsState = {
meals: [],
};
export const mealsSlice = createSlice({
name: "mealsItems",
// `createSlice` will infer the state type from the `initialState` argument
initialState,
reducers: {
addMeals: (state: mealsState, action: PayloadAction<Meal>) => {
state.meals = [...state.meals, action.payload];
},
},
});
//-=-==-export the reducers(setters)-=-=-=-=-=-=-=-=-=-=//
export const { addMeals } = mealsSlice.actions;
//-=-=-=-=-=-=-=-=- Other code such as selectors can use the imported `RootState` type
export const selectMealsItemsmeals = (state: RootState) =>
state.mealsItems.meals;
//-=-=-=-=-=-=-to be explained--=-=-=-=-=-=-=-=-=-=-=-=-=-//
// export const selectMealsItemsmealsWithId = (state: RootState, id: string) =>
// state.MealsItems.meals.filter((item: Meal) => item._id === id);
//-=-=-=-=-=-=-=-=select totlal in the MealsItems-=-=-=-=-=///|||||||||||||||
// export const selectMealsItemsTotal = (state: RootState) => {
// state.MealsItems.meals.reduce(
// (total: number, item: Meal) => (total += item.price),
// 0
// );
// };
export default mealsSlice.reducer;