In the last section we put together a little bit of boilerplate for our application.
And I also just set up as Slint and I'm so happy I did.
This is a fantastic example of the tiny mistakes that it keeps you from making.
You'll notice that in the path and sodomite index files I listed.
With a capital A.
When in fact we created the file with the lowercase say.
So I was going to go with the lower case version.
So inside of index I was yes I'll fix up the paths to be a sarcy slash app.
And inside of my android J us I'll make sure I do the same.
OK so it's a little bit of a typo there.
Go.
So in this section we're going to set up the redux side of things inside of our application.
Now I want to tell you right now that unfortunately setting up the read out side of things requires
typing out a pretty good amount of code where it's just going to look kind of mysterious to us.
OK.
So generally when I teach redox I love to give people our beginners a kind of boilerplate application.
You know something with a very low level redux code already put together.
Just because it helps us from getting really caught in the weeds right at the get go.
But since with reac need have we generate a new project on the fly it kind of makes a little bit harder
to start off with like you know some pre-build application I've worked on.
Anyways the point of what I'm saying here is we're going to go through a little bit of setup.
I don't think it's going to be that painful but we are going to see a pretty decent amount of code for
stuff that we haven't really touched on before.
Let's just get to it and you guys can let me know if it's in retrospective it's really crazy or not.
We'll see how it turns out.
So I'm going to be giving some amount of discussion about what's going on but for the most part we're
going to kind of try to get through the set up and then focus on learning what's going on inside of
my app file right now.
And at the very top I'm going to import two things I'm going to import provider from re-act redux and
I'm going to import create store from redux.
Notice that the last three import statements that I have right now all have curly braces around them
as so curly braces around provider curly braces around create stores as well now we create store function
right here.
Probably looks a little bit familiar.
Right we got that from redux.
We tested out inside the browser is what creates our store object.
But the provider object certainly is not.
And in addition this whole library of re-act redux you know what the heck is that.
I thought we were just doing redux.
Well let's just add a little bit more code and it will discuss about what each of these is doing.
So inside of my out component I'm going to wrap the view tag right here with the provider tag.
So that thing that we just imported is a GSX component.
So I can render it as the provider.
Next I'm going to pass the provider a store.
I need to just put in your create store and right now I'm not going to create store I'm just going to
pass it the method just like so just this right here.
So let's talk about what the provider tag right here does.
I'm going to help pull up a diagram to help us out with that definition a little bit.
The provider tag works together with the store.
Each of them has a very specific job.
So the store is what actually holds our application state.
You know like all the data within our application.
So in this diagram right here I've got the store sitting right here and I'm saying that it has like
basically pieces of state called state one state to state three state for the purpose of the provider
on the other hand is what translates all the data into that in that store into something that can be
used by the re-act side of our application.
So the store is the thing that holds our state while every provider is communication with re-act.
You may have noticed that when we were working with redux over in the browser We didn't touch a single
thing that said react anywhere right.
Like there wasn't a single thing that we were working with on the redux side that said oh yeah hookup
to react at this point in time like that never ever happened.
So the real truth behind redux as a library is yeah it was definitely made with react in mind.
Right.
Like the author wrote it with react in mind.
But they did not design the library.
Redux was not designed to only work with react.
It doesn't really have any Riak specific bindings to it whatsoever nothing that makes it work nicely
with react.
That's the job of the re-act light re-act redux library that we just installed.
So this reata redux library is the communication glue between redux and react.
So it makes them play nicely together.
So at this point in time we've got some amount of boiler plate on here.
We've got our create story call.
The next thing that we're going to do is we're going to create a producer and we're going to pass it
to this create store right here.
So remember when we're in the browser when we try to create a store and we just you know said like Freestore
we got an error message thrown back to us that said hey you have to throw in at least one reducer here.
So we're going to create one reduce her and then pass it into the store.
The only kind of flip here is the only kind of the way in which I'm going to make things really confusing
let me just be blunt about that is that we're going to do it in a slightly and we're going to create
this news from a slightly different way than how we made the last one.
So just bear with me for a moment inside of my source directory.
I'm going to make a new folder called reducers and then inside if you're going to make a new file called
index dot J.S..
So index dot is right here a member that shares the same pattern as that like common components folder
that we had before.
So in theory we might have many other reducers inside this file but they will all be imported into this
index file right here.
So this index file is kind of like the window to the rest of the world as far as reducers go.
So now here's the kind of weird part that I mentioned.
We're going to say imports combine reducers from redux.
Notice I have curly braces around combine reducers here as well.
We are pulling this property out of the redux library.
Now we had previously created a redux store with just one reducer.
But in the vast majority of apps you want to have multiple reducers like multiple different pieces of
state to make all these different reducers play nicely together.
We use this combine reduces function from the redux Library.
We'll certainly see the impacts that combine reducers has on application state.
For right now let's just get our example working I can put down export default combine reducers and
I get a pass it an object.
It's going to have a single key of libraries and that's going to return an empty array right now.
So at this point we created 1 reduce or it's going to other main libraries and by default that reduce
or always returns an array no matter what.
So even if an action comes through is reduce or we are always going to get an array returned.
Finally we need to wire this reduce up as simple an and nonfunctional as it is I suppose to create StoryCorps.
So we need to get that producer over to create store right here.
So inside of our out file I will import reducers from in the current directory get the reducers folders
so in the current directory get the reducers folder and I don't have to put on Slash's index here because
just by importing the folder it's implied that I want the index file.
And finally I'll pass in reducers to the create store call.
So create or see me reducers.
There we go.
That's it.
That is the like.
That is the bare minimum amount of redux it takes to set up an application.
We created a store and passed it to the provider tag.
We also created one reducer and we passed it to the store when we created it.
So this is a good start.
Let's continue going in the next section.