The last video we did a little bit of trouble shooting around the current version of NPM.
Now again you may or may not have that have had that little issue either way at this point in time.
You should be able to go back to the server directory run the NPM rund dev command and then see both
the backend server and the front end server.
Both Papa.
So at this point I am able to go back over to my browser at localhost 3000 and see the message.
Hi there.
And remember Hi there is being generated by our app component.
At this point in time.
So let's continue with our setup again at this point we have our indexed on J.S. file which is going
to be housing a little bit of our redux setup and then we also have the js file which will eventually
hold some of the re-act router stuff.
Let's continue inside the index J.S. file at this point in time and continue on with some of this set
up around the redux side of our application.
Now in this video we're not only going to do some of the actual set up but we're also going to talk
about some of the different libraries that we're using specifically the re-act redux library which is
one that we installed in like two videos previous.
We're going to do going to do a little bit of a discussion about how we wire up redux from scratch and
then we will actually add it to this file.
So let's get to it.
All right I'm going to pull up a diagram and here we go.
OK.
So remember we have at this point installed re-act redux and re-act redux as a reminder the redux library
is all about holding all the states where all the data inside of our application.
And so it's fairly easy for us to kind of make a guess on some of the different pieces of state we'll
have inside of our application.
I kind of expect to eventually have probably two separate reducers inside of our application or two
separate pieces of state one of which will be essentially in charge of just deciding whether or not
the user is logged in.
And then the other will be responsible for recording a list of all the surveys or fetching a list of
all the surveys that the user has created over time.
Now we might end up with another reducer or two inside of our application but we'll just see how it
all pans out and then go from there.
Right now I think that this is a pretty good place to start with and kind of to aim towards.
So as a reminder of how redux works behind the scenes at the very top we've got our redux store which
is where all of our state exists to determine our current state or to change our state.
We call an action creator which dispatches an action.
The action is sent to all the different reducers inside of our application.
Those reducers are combined together with the combined reducers call and that is used to update the
state in our redux store.
Put another way we can look at this diagram right here.
So again a little bit of reminder of what redux is doing for us.
We have a re-act component from the Riak component.
We will call an action creator that will return an action that will be sent to all of our different
producers which will then update all the states inside of our redux store after that update all of that
state that exists inside the store will be sent back down to react components which causes them to re
render and display some amount of new content on the screen.
So let's get to suddenly this thing up before we actually wire in or import any libraries into the index.
J.S. file I want to talk a little bit about this very root level set up of redux because I've never
really gone through it in any of my other courses in great detail and so I want to take just a little
bit of time and expand upon the exact set up we're going to do inside this file.
So at this point we've just reviewed and said yes we've got this story.
It contains all of our state and some how it connects up to the Riak side of our application.
So we can update the state that exists inside of it.
But how does that actually connect to react per se like what set up are we really doing here.
OK.
So this is what really goes on behind the scenes inside of our indexed J.S. file.
We are going to create our redux store and we are also going to render a provider tag the provider tag
right here is a react component that is provided to us by the re-act redux library.
And remember the reactor redux library is a library whose sole purpose is to make sure that react and
redox work together nicely so that provider tag you can really think as being the sort of bonding layer
or the kind of glue that exists between the react and redux sides of our application.
So we will provide that provider tag we will pass it our redux store because the provider tag is at
the very parent component of our application.
Any other component that we create like say something called a survey list item can reach directly into
the redux store and plus some amount of state soly things to that provider tag.
So it is really this provider tag that we're going to place that serves as a sort of glue between the
react and redux sides of our application.
Now I might have one other diagram here.
No I don't think I do.
OK.
So this is a good one.
So just as another with your the entire purpose of that store at the very top of our application is
to give us the ability to access data inside of our application from a very deeply nested component.
And so we don't have any of these post list things over here and in these posts list components or anything
like that.
I just mean to remind you that if we have a very heavy component hierarchy or a lot of components inside
of our application part of the idea behind redox is that some arbitrary component all the way down here
can access the global data or global state inside of our application by reaching directly into that
redux store.
OK.
So with that in mind just very quick review.
Kind of high level stuff and what the purpose of that provider tag is let's now import the provider
tag will import some helper's from redux and we'll get started with setting up the redux of the application.
So at the top of our index G-S file I'm going to import the provider tag from reactor's docs import
the create store and apply middleware helper's from rebox
right underneath our import of the app component we will use the create store helper to create a new
instance of our redux store.
So right here around line 8 or so will say can store is create store.
Now the first argument to create stort is all the different producers that we have inside of our application.
And we haven't set up any reducers just yet.
So I will give it a single dummy reducer a single dummy reducer.
We're going to replace this very shortly.
So my dummy reducer is going to be an arrow function that returns in a ring like so.
So again we're going to come back and replace this argument right here or this is just a stand in to
make sure that we can at least get redux started up as a second argument all provide the starting or
initial state of my application.
The second argument here is most relevant when you're taking care of server side rendering and stuff
like that.
So for us we don't really care about setting up some type of initial state.
So we're going to just pass an empty object.
Then finally we will add in the applied middleware call right here.
We don't have any middleware that we're going to hook up right away but we will come back very shortly
and add redux thunked in here.
So I will add in Apply middleware like so I'll make sure that I invoke it by placing a set of parentheses.
OK so that looks good to start.
We're now going to expand upon this app component right here.
Remember we just said that at the very top level of our application.
So up here at the very top right above the component I want to show the provider tag or this provider
component that is provided to us by the reactor redux library.
So inside the index file We're going to place that provider tag and as an immediate child right inside
of it will place the app component.
Now all these words might seem kind of complex.
In practice what we're going to do here is fairly straightforward.
So first we're going to give myself a little bit of space to work with like so and then going to remove
the first argument entirely.
And we're going to put the app back in here by just one do it from scratch.
So I'm going to say here's my provider tag I'm going to make sure I put a comma after it because this
is the first document and the document selector is a second to that provider.
I get it past the store that we just created as a prop so store is store like so and then as a child
to the provider tag we'll pass the app component like so.
OK.
So this is looking pretty good.
So we now are still showing the app component but we have also created a redux store at the very top
level of our application and hooked it up to the re-act side of our application by placing the provider
tag.
Again remember the provider tag right here.
It is a re-act component that knows how to read changes from our redux store any time the redux story
gets some new states produced inside of it.
The provider will inform all of its children components.
So essentially everything that the app renders that some new state is available and it will update all
of those different components with the new state.
So this is looking pretty good.
Let's flip on over to our browser and just make sure everything everything.
Make sure everything is still appearing on the screen without any errors.
So if I go back to localhost 3000 It looks like the automatic refresh has already kicked in.
So I think were good to go here.
Let's refresh once just to really make sure
kids so here's my refresh
and I still see high there appear on the screen.
So this is a pretty good start.
Let's continue on the next section.
We're going to start to expand out on the different reducers inside of our application.
Remember we just spoke about how we'll probably have like an author reducer and a servies reducer.
So we'll review that stuff a little bit and we'll set up some different reducers and make sure we provide
them as the first argument to create store rather than this kind of dummy reduce here.
So I'll see you in the next section.