In the last section we did some very early set up on our project.
We've got this app component put together and you'll notice that I created as a functional component
as opposed to the class based component that has been in almost every app that we've put together so
far.
Remember we usually make use of class based components any time that we want a component to build to
make use of state.
Now that we are making use of redux we're going to see that we make use of component level state much
less frequently.
Instead we're going to generally store all of our data inside of redux instead.
Now just so you know there are some scenarios where we want to have state or data inside of redux and
state inside of our reaction opponents as well.
We'll see some of those scenarios later on.
But for right now we're just going to say that in general all the state that was inside of our re-act
up is now going to be on the redux side of things instead.
So what that means is a much simpler and much more simple straightforward app component.
All right.
So now in this video I want to tell you a little bit more about how we're going to design the redux
side of our application.
After that we'll take a look at how we're going to organize our project directory and where we're going
to create some of those things like the action creators and reducers and all that kind of good stuff.
But first I want to give you a quick discussion on how we're going to get react and redux to get integrated
together and we're going to think about the general redux design.
All right so even though I just said that we're going to have states in side of redux.
I want to imagine what we would do for this application if we were not making use of redux at all.
So here's my idea on how we might approach this application.
If we were not making use of Redux I think that the app component would have a list of songs and it
would probably also record what the currently selected song was.
The app component would then probably pass down that list of songs to the song list so that the song
list knew what to show on the screen.
In addition it would probably pass down a callback like on song select or something like that so that
any time that the user clicks on that select button right there the song list could tell the app component
that the user just selected some particular song.
And then in addition for our song detail over here the only thing that the song detail really needs
to know is what the currently selected song is.
And so the app component would pass that down to the song detail as a prop and the song detail would
simply render the details for that song out on the screen.
So in total I think with re-act alone this would be a pretty simple and straightforward application.
So how is this going to change now with redux.
All right here we go.
So just as before we're going to have our app component a song list and a song detail but the app component
is going to be passing very little information down to the song list and the song detail.
Instead we're going to abstract out all these ideas of creating a list of songs and selecting a song
and what the currently selected song is into the redux side of our application.
So we're going to create a producer that is going to produce a list of songs.
We're also going to have a producer that records what the currently selected song is.
That's the two pieces of state inside of our application.
The list of songs and the currently selected song.
And then finally we're going to make sure that we also have an action creator so that we can somehow
change our state.
Remember that's the only way that we change our state inside of a redux app.
We have to call an action creator.
So if you want to change what the currently selected song is we're going to call an action creator called
something like select songs that will dispatch an action and tell this selected song producer to update
its data and reflect the new current present picked song.
Now one thing I want to mention very quickly here is that our song list reducer is going to pass.
Creating a static list of songs like a fixed array of objects.
So technically this doesn't really need to be data that is stored in redux at all but just to get an
idea of the basics.
We're going to throw that static unchanging list of songs into a reducer and essentially maintain it
through the reducer.
Even though like I said it's kind of technically overkill for what we're doing.
OK so that's it.
That's how we're gonna do this on the redux side.
So now the question is how do we somehow get this state produced by the producers and somehow get this
action creator to be called by our song list or are consumed by the song list.
Let's take another brief pause.
When we come back the next section I can't tell you exactly how that's going to happen.
So quick break in all.
Talk to you in just a minute.