Error: cannot read properties of undefined in react-redux - reactjs

Question

I am trying to loop through every movie inside the movies array and render it.
There are 4 sections Trending,NewDisney,Originals,Recommended.
The movies' data is stored inside the firestore and I am retrieving it from there.
Here's the code
(All the styling is removed to make the code short here)
movieSlice.js file
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
recommend: null,
newDisney: null,
original: null,
trending: null,
};
const movieSlice = createSlice({
name: "movie",
initialState,
reducers: {
setMovies: (state, action) => {
state.recommend = action.payload.recommend;
state.newDisney = action.payload.newDisney;
state.original = action.payload.original;
state.trending = action.payload.trending;
},
},
});
export const { setMovies } = movieSlice.actions;
export const selectRecommend = (state) => state.movie.recommend;
export const selectNewdisney = (state) => state.movie.newDisney;
export const selectOriginal = (state) => state.movie.original;
export const selectTrending = (state) => state.movie.trending;
export default movieSlice.reducer;
Recommends.js file
import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import p1 from "../images/sample_img.jpg";
import { selectRecommend } from "../features/movies/movieSlice";
import { useSelector } from "react-redux";
const Recommend = () => {
const movies = useSelector(selectRecommend);
return (
<Container>
Recommended movies for you!
<Content>
{movies &&
movies.map((movie, key) => {
<Link to={"/detail/" + movie.id} key={key}>
<Wrap imgUrl={movie.cardImg} alt={movie.title} />
</Link>;
})}
</Content>
</Container>
);
};
export default Recommend;
Home.js file (Where all the components are imported)
import React, { useEffect } from "react";
import styled from "styled-components";
import ImgSlider from "./ImgSlider";
import NewDisney from "./NewDisney";
import Originals from "./Originals";
import Recommend from "./Recommends";
import Trending from "./Trending";
import Viewers from "./Viewers";
import { setMovies } from "../features/movies/movieSlice";
import { useDispatch, useSelector } from "react-redux";
import db from "../firebase";
import { selectUserName } from "../features/user/userSlice";
import { collection, query, onSnapshot } from "firebase/firestore";
const Home = () => {
const dispatch = useDispatch();
const userName = useSelector(selectUserName);
useEffect(() => {
let recommends = [];
let newDisneys = [];
let trendings = [];
let originals = [];
console.log("Hello!");
const q = query(collection(db, "movies"));
onSnapshot(q, (snapshot) => {
snapshot.docs.map((doc) => {
console.log(doc);
switch (doc.data().type) {
case "recommend":
recommends = [...recommends, { id: doc.id, ...doc.data() }];
break;
case "new":
newDisneys = [...newDisneys, { id: doc.id, ...doc.data() }];
break;
case "trending":
trendings = [...trendings, { id: doc.id, ...doc.data() }];
break;
case "originals":
originals = [...originals, { id: doc.id, ...doc.data() }];
break;
}
});
dispatch(
setMovies({
recommend: recommends,
trending: trendings,
newDisney: newDisneys,
original: originals,
})
);
});
}, [userName]);
return (
<Container>
<ImgSlider />
<Viewers />
<Recommend />
<NewDisney />
<Originals />
<Trending />
</Container>
);
};
export default Home;
But unfortunately this is not working and I am getting this error for all components (Recommend,Trending,NewDisney,Originals)
movieSlice.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'recommend')
at selectRecommend (movieSlice.js:26:1)
at memoizedSelector (with-selector.development.js:79:1)
at getSnapshotWithSelector (with-selector.development.js:134:1)
at mountSyncExternalStore (react-dom.development.js:16799:1)
at Object.useSyncExternalStore (react-dom.development.js:17727:1)
at useSyncExternalStore (react.development.js:1676:1)
at useSyncExternalStoreWithSelector (with-selector.development.js:145:1)
at useSelector (useSelector.js:41:1)
at Recommend (Recommends.js:8:1)
at renderWithHooks (react-dom.development.js:16305:1)
Please help me.

Answer 1

The error is occurring where you are doing this
export const selectRecommend = (state) => state.movie.recommend;
export const selectNewdisney = (state) => state.movie.newDisney;
export const selectOriginal = (state) => state.movie.original;
export const selectTrending = (state) => state.movie.trending;
Remove these and use this way to get values in App.js
const { recommend, newDisney, original, trending } = useSelector((state) => state.movie);