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!