Undefined properties when playing a song from the homepage

[rajput-hemant]

I encountered an issue when attempting to play a song directly from the homepage of my application. The problem occurs when I click on a song card, which dispatches the getSongAsync action to retrieve the song details. After the action is dispatched and fulfilled, I noticed that several properties of the song object are undefined. Here's a code snippet illustrating the problem:

const { song } = useAppSelector((state) => state.root.player);
console.log(song);
// will log the song successfully but still throws an undefined error down in the code

Go to the line

Steps to reproduce:

• Open the application and navigate to the homepage.
• Click on a song card to play the corresponding song.
• The getSongAsync action is dispatched with the appropriate id parameter.
• After the action is fulfilled, access the song object using useAppSelector.
• Log the song object or try to access its properties.

Actual behavior:

After dispatching the getSongAsync action, the song object is defined, but several of its properties (including the image property) are undefined.

Expected behavior:

When playing a song from the homepage, the song object should contain all the necessary properties with their respective values after the getSongAsync action is fulfilled.

Additional information:

• I'm using the thunk middleware to dispatch the getSongAsync action.
• The action is being dispatched successfully, and the API call retrieves the correct song details.
• The application state is updated with the fetched song details.
• However, when accessing the song object after the action is fulfilled, several properties are undefined.

Please let me know if any further information is needed to investigate and resolve this issue. Thank you!