So in my react application i have in my store, an array of video objects videos: [{},{}] now im trying to work with this information, so when i load a page, obviously the array is empty, videos: [] because the action has yet to fire off to fetch the videos from the server. so im trying to do a bit of conditional rendering, that if videos.length > 0 do something, because for testing purposes im trying to access videos[2] which doesnt exist until the array is populated.
but im getting an error that videos.length is undefined
i destructured the state
const {videos, loading} = useSelector(state => state.videos) (where the reducer is also called videos..
in my Redux extension i can clearly see that its an empty array, and i know even an empty array, has a length property (0) so i dont understand why im getting this as undefined.
This line of code:
const {videos, loading} = useSelector(state => state.videos)
assumes that state.videos is an object which will have 2 props videos and loading. Something like so:
state: {
videos : {
videos: videosValue
loading: loadingValue
}
}
When it finds the 2 props, then it destructures state.videos and assigns the values like so:
videos = videosValue
and
loading = loadingValue
You may want to review your state. May be the state does not have the structure stated above? May be state object has a prop named videos which is an Array & another prop named loading which is boolean?
If state object is of the below structure:
state: {
videos: videosValue
loading: loadingValue
}
then, you may want to destructure the state object and not state.videos object.