In the last section we introduce some terminology with the redux library.
We had an action or a douceur a state and a store.
I don't want to talk too much more about this example right now let's just dive into actually coding
it up.
So our goal is to make a tiny redox application where we can take a string of characters and split them
into an array.
That's it.
That's all we're trying to do here.
So I'm going to flip over to back or J.S. playgrounds and I can write remember I did write some javascript
on the left hand side here.
JS playgrounds is not hooked up to any type of import export system and has direct access to the redux
library.
So I can make reference to redux and I get the library back directly here.
I know this looks like it's an empty object but trust me it's the actual redux library.
So we're going to basically work with redux directly.
The first thing that we're going to do is create a store remember a store is an object that holds our
application state and reducers.
So a create store can store equals redox dot create store.
Now notice that already we had a nice big error message here down on the bottom right hand side.
When we create a redux store it expects us to pass in at least one redos or function guide.
So remember a producer is a function that produces some amount of application state and clearly it's
expecting us to pass in at least one when we create a store.
So I'm going to pass in a single function as a producer.
It's also a cost reducer is a federal function that returns an array.
So just be clear on the syntax here reducer is a federal function.
It returns an array whenever it's invoked.
Now I'm going to pass that reduce her to the create store call.
OK.
Now boom your message goes away.
So looks like.
All right.
Like that seems reasonal something's going right right now remember that the store contains our applications
state and all of our reducers however many we might have or application at any point in time.
We can ask the store for its current state.
So say store dot get state.
So right now it looks like our entire application state as it stands right now is just a single array.
So what does that tell us.
It tells us that by default when we create a redux store in passen reduce or the reducer will be ran.
And whatever the reduce your returns will become our applications are a redux store state.
So we've now got an application state of just anti-reg that's it.
All right if we change the return value from the reduce or our application state will change as well.
So if I start to put in like you one two three one two three you can see that yeah it looks like our
application state is updating as well.
So again whatever the reduce the returns is our application state and I take the one to three out of
your really quick and you flip back over toward diagram real quick so we can remember some of our definitions.
Here we go.
So again we've now created a store and we passed that store one reduce or reduce or produces our application
state.
So that's where we are right now.
Next we're going to create an action and action is a plain javascript object that tells the reducer
that it needs to modify the state that it is producing.
So will first create the action then tell the producer how to deal with that action.
So back over and Jae's playgrounds I'll create an action and I'll say it for probably a third or fourth
time now.
An action is a plain javascript object.
So I just created a plain javascript object right here.
The only requirement of an action is that it defines a type property.
So when I say type property like literally type is type property will always be a string.
The purpose of this type property is to tell or reduce or to commit a very specific operation like a
very specific command or instruction.
So it's going to have a type of split stream because we want to tell her douceur hey I want you to split
the string or like a string like something or whatever.
We will also tell the user which string we want it to split by passing it on a payload property like
SDF go into to go much better get.
So here's our action.
It's a plain javascript object.
It has a type property that type you can think of as being like a command or an instruction to the reducer
and it has a payload.
The payload is the thing you know the piece of data that we want to implement to work on.
This is like the thing that we want to do some action to we want to manipulate this thing right here
whatever's on the payload property.
Now we're going to update our reducer which is up at the top and instructed how to handle this action
right here.
OK.
Reducers are always called with two arguments.
The first is the current state that it has produced.
And I know that's very confusing we will come back to that.
And the second is an action.
So just bear with me for a second here we're going to put some code on the screen and then discuss it
in the same state as an empty array and action.
And then I'm going to put down a fat or a function body inside of your or say if action doc type is
split.
String
then return action not payload split.
Otherwise return state.
OK so what we're doing here is we are saying that we've got to reduce or it gets called with two arguments.
Right now we're going to just ignore that first argument.
The second argument will be an action.
So we've created an action down here so you can kind of imagine this object right.
You're appearing inside this reducer as the second argument.
If the actions type is equal to split string and for us it will be then we're going to take whatever
the action is payload property is and split it with an empty string so it'll turn it into just like
an array of characters a SDF.
So that's it that's all we really need to know about actions right now.
The last thing you have to do is figure out how to tell this reducer to run with this action.
So I want to like feed this action into this reducer right.
That's like what we're seeing with the diagram over here.
I want to take this action and I want to push it into the reducer so to do that our very last step I'm
going to call store dog dispatch action.
And then finally I'm going to run store and get state again.
So now when I run my get state method a second time you'll see that.
OK it looks like for some reason we had an empty array before but now we've got a array of characters
here like a SDF.
It's been a really long session.
Let's take a quick break and then come back and discuss them like absolute minutia of all this code
that we just added in