CODEWITHSUNDEEP
javascriptreactjsredux
Devesh Kumar
Devesh Kumar

Reputation: 186

How can I structure my data better in the redux state?

I'm new to this so it might be a very beginner question but I hope there might be a solution to this for the people who are good.

songData() here returns an array of lots of song objects.

That's why the [0] here in currentSong: { currentSongData: songData()[0] },

This is my redux state:

const initState = {
  allSongs: songData(),
  currentSong: { currentSongData: songData()[0] },
  isPlaying: false,
  isLibraryOpen: false,
  songTimer: [
    {
      currentTime: 0,
      duration: 0,
    },
  ],
};

Whenever I have to access anything in the currentSong, I have to write something like:

currentSong.currentSongData.name

or if I define the currentSong as currentSong: [songData()[0]], then like:

currentSong[0].name

Is there a better way to define the redux state where I don't have to write such long things when I access the data?

I want to access it by writing

currentSong.name

BTW this is the structure of the song object.

      {
        name: 'Cold Outside',
        cover: 'https://chillhop.com/wp-content/uploads/2020/09/09fb436604242df99f84b9f359acb046e40d2e9e-1024x1024.jpg',
        artist: 'Nymano',
      },

Upvotes: 1

Views: 48

Answers (2)

buzatto
buzatto

Reputation: 10382

I would favor to store currentSong's key id which you could extract then its data content from allSongs. otherwise, you would be duplicating data something you better avoid. in this way, at initial state you would have currentSongId: songData()[0].id

so how would you handle that at your functions? you can use useSelector. this function allows you to filter your data so you consume it properly. at your function component you would extract like:

// at your component function
const selectedSong = useSelector(state => state.allSongs.filter(({ id }) => id === state.currentSongId))

if you read further below at useSelector docs, you could go a step further and memoize its value to avoid unnecessary rerenders in combination with another library reselect.

Upvotes: 0

Ilyas
Ilyas

Reputation: 94

You can use property spread notation

currentSong: { ...songData()[0] }

Upvotes: 2

Related Questions