Create tracks store in Redux

[IkeHunter]

Intro

Currently, the spotify player is controlled via React Context, and should solely be responsible for communicating with Spotify's web player SDK. When trying to get information about the queue (list of next tracks), those should be accessible via a redux store.

Spec

Structure

The store should look like this:

store/
|-- tracks/
|   |-- index.ts
|   |-- tracksSlice.ts
|   |-- tracksSelectors.ts
|   |-- tracksActions.ts
|   |-- tracksThunks.ts

For an explanation of terms and what each file does, read more from our wiki: Working With Redux.

Interface

When someone else needs access to the tracks, their code should look like this:

// SomeComponent.tsx

export const SomeComponent = () => {
  // All tracks after current
  const nextTracks: Track[] = useSelector(selectNextTracks)
  // Just current track, or null
  const currentTrack: Track | null = useSelector(selectCurrentTrack)
  // Array containing current track and next tracks, if applicable
  const allTracks: Track[] = useSelector(selectTracksQueue)

  return <div>...</div>
}

Note: The current track should be accessible from either the player context, or tracks store. Both should return the same information. However, the player context is the source of truth for the current track, and the redux store just references whatever is in the context state.

Tasks

• Create tasks store
• Create current track selector
• Create next tracks selector (returns tracks AFTER current track)
• Create tracks queue selector (returns current track and next tracks)
• Create thunk for fetching tracks queue (this will connect to network, just return empty array for now)
• Create action for activating fetch tracks queue thunk (the thunk is not directly used, but is wrapped in an action)

Next Steps

This will eventually be one of the primary arteries in the application, and will coordinate updates to and from the server. Future tasks will involve linking this state to the server via the webhook and sharing information back and forth to create a continuous flow of information.