Unless we generated our brand new project I'm not going to change into that directory that was created.
I'm going to start at my code editor and site there and then we're also going to install a couple of
additional dependencies inside of our project right now rather than having to come back and install
these dependencies later on.
So inside of my blog project directory I'm going to do an NPM install dash dash save and we're going
to get redux reactor's ducks X-posts.
And then one other new dependency that we're going to talk about quite a bit inside this application
called redux Dasch think like so redux Dasch thunk.
That's the new one.
OK.
So I'm going to run this.
And while that's installing.
Let's have a quick reminder about what all these dependencies do including this new one called redux
thunk.
All right.
So first off redux.
Yup.
You know what that is.
We've seen good examples of that already.
It's the actual redux library itself.
Next up reactor redux.
We just worked on an application that made use of this library.
Remember this is the integration layer between the react and redux libraries because they were not originally
designed to work with each other.
Right out of the box we've made use of axially before member.
We make use of ASIO's any time that we want to make network requests.
Ex-U.S. is not strictly required inside of these Riak projects.
We could technically use that fetch API or the fecche function.
But remember we had said that there's a lot of kind of manual hand-holding that you have to do with
the fetch function.
And so it's usually just a lot easier to make use of XS.
And then finally this new dependency called redux thunk.
Now this is a dependency that we refer to as a middleware the term middleware applies to the redux library
middleware are essentially functions that are going to slightly change the behavior of our redux store.
So they will add in new capabilities or new features to the redux side of your application.
In the case of redux thunk this is a middleware that is going to help us make network requests from
the read up side of rap in the vast vast majority of redux applications you are ever going to work on.
You you're going to make use of a middleware like redux thunk.
Maybe not exactly redux stunk but something very much like it.
Redux thunk is extremely popular and there's only a handful of other alternatives that make it easy
for you to do network requests from the redux side of your application.
So again if not redux thunk it will be something very similar to it.
All right so let's flip back over to our terminal.
It looks like everything has installed successfully.
So I'm not going to start up my application with NPM start.
And after a second or two we should see the application.
OK it started up but I already deleted some boilerplate inside the SIRC folder.
So you're probably going to see that default loading screen appear right now.
So let's flip back over to our code editor.
We're going to go ahead and start doing some cleanup inside that sarcy directory.
So as usual I'm going to delete everything inside my sarcy folder and we're going to replace all that
boilerplate automatically generated code with some usual boilerplate that we're going to use inside
of just about every react and redux application that you and I work on.
All right.
So inside the sarf see folder I'll begin by creating an index file.
I'm going to import re-act from re-act import reac Dom from re-act dash Dom.
I'm going to get the provider element from reactor's docs and then I'll make sure that I also get create
store from the redux library itself.
And then after that I'll also assume that I'm going to eventually have an app component we haven't created
just yet but we will in just a moment.
So import app from components app and then I'm also going to assume that we're going to eventually have
a couple of reducers inside this application so I'm going to import reducers from reducers and then
at the bottom we'll do our re-act dum dum render a call so I'm going to show my provider tag I'm going
to pass it reate store and when I call create store right here I'll be sure to pass in all my different
reducers I'll close off the provider tag and then inside there I'll show my app component.
And then finally as the second argument to the re-act Dannatt render a call we'll do the same thing
we've always done before.
We'll tell re-act where it needs to render our application.
So I'll say document Dom queries selector Halland route like the.
All right.
So just some typical boilerplate that you're going to see in just about every single redux application.
So now at this point if we flip back over to our browser we'll very quickly see an error message because
we do not have a app file.
We also do not have any reducers just yet.
So it's very quickly make a kind of default little app component and some default little reducers just
to get our application working and appearing on the screen.
So inside my SIRC directory I'll make a new folder called component's inside of component's I'll make
my apt.
Genius file.
And then inside of here I will import re-act from re-act I'll create my app component as a functional
component and right now we'll just have it return a div that has that text app.
Now we've seen many times so far throughout this course as we've been making use of semantic UI.
We've always had to come back to this app component and add in that class name of UI container.
Remember that class name when used with semantic UI gets us the nice margin on the left hand side and
the right hand side.
So we're going to make sure that we just go ahead and apply that class name right now.
So we don't have to come back and do it later as we've done throughout this course so far.
So on that div I'll put on a class name of UI container and then finally at the bottom I will export
default app like so.
All right so now if we save this we can flip back over and we're going to see that the error message
has now been updated.
Now it says that it cannot resolve reducers which means essentially we don't have a reducers directory.
We don't have any reducers to make use of whatsoever.
Now we've already done a lot of typing inside this video.
So let's take a quick pause right here.
When we come back the next section will start creating some reducers for this application just to get
our application rendering and working inside the browser.