In the last section we spoke about how our analogy muddled the redux cycle step by step.
Now we still don't really know why this thing is this cycle.
And even though you might now have some idea like a rough idea of what an action creator is or when
action is we still don't really have a lot of context on what is going on in the redux world.
So in this video we're going to start writing out some code to model our entire insurance company step
by step using redux to write this code.
We're going to use that same tool that we use much earlier called Code pen.
So in a new browser tab I'm going to navigate to code when I go on then going to find the create button
on the top right hand side and click on new pen once here we need to add redux as a dependency to our
project.
So I going to click on the Settings button.
I'll go to the javascript tab and I'll search for redux and I'll select it.
Then finally I'm going to click on Save and close.
Now if you want to get your editors here on the left hand side as opposed to the default top position
you can click on change view and then you can select your editor layout.
In addition to putting my editor layout with the editors on the left hand side I'm also going to change
my view to presentation mode.
Now you probably don't see these options right here unless you are a subscriber to Copen which means
you're paying them money.
I am a subscriber which is why I see these options.
Again you probably don't.
I'm going to look over to presentation mode.
All it does is hide the top panel.
Just so you can see what I'm doing a little bit more easily.
Now the next day I'm going to do is collapse down to just the javascript panel here.
We're not going to write any H.T. mail or any success.
In addition we're not going to actually preview any content with this default preview tab over here.
Instead we're going to be consul logging a lot of data.
So I'm going to open up my browser's console so that we can see anything that we can so log.
And then finally inside the javascript panel I'm going to write out console.
Clear like so the cons thought clear line right here is going to automatically clear everything inside
of our console.
Any time that our code is read ran and that's just to make sure that any time we see a console log we
only will see the latest version of our program.
OK.
So that's all the setup now ready to actually start writing some code to model our insurance company.
We're going to first begin by creating an action creator and an action.
Remember in-action creator is a function that is going to return a plain javascript object which referred
to as the action the action is just like our form and action it's going to have a type that describes
the purpose of the form and a payload that provides some context on exactly what this form is doing.
So back inside of my code editor over here I first put a comment that says that we're about to write
some code to simulate people dropping off a form and where again we refer to these as action creators.
We're going to first create an action creator that's going to simulate someone dropping off a create
policy form.
We're going to ultimately create one separate action creator for each different type of action that
we have inside of our app.
So we're going to have one action creator that's going return in action with type great policy or make
a second action creator for create claim and a third action creator for delete policy.
So I'm going to make a javascript function called create policy.
This is going to return an object and this object right here is an action.
Remember we refer to this as a form in our analogy.
The action is going to have two properties the type and the payload.
So I'm going to put in a type and I'm going to assign this a string of create a policy by convention.
Whenever we assign a type we usually use all uppercase characters and underscores instead of spaces.
And so usually by convention I don't have to do this but by convention instead of writing create a policy
I would write out a type of create policy.
Like so then I'll put a comma at the end of the line and then after that I'm going to specify my payload.
Remember my payload is going to have some information that provides context about this form or this
action that we are Smiddy.
So in the case of creating a policy we probably need to provide a name and some amount of cash that
is required.
Any time that a user first signs up for a policy so for my payload I'll give it a name of Alex and an
amount.
This is like an amount of cash of 20 which represents like $20.
OK.
So what you see right here is a completed action creator that returns in action.
The only problem with this action Creator is it stands right now is that it only works to create a form
that will only work for someone called Alex that is trying to commit $20.
Now chances are we're not going to always have a customer called Alex who's always trying to get $20.
So usually to customize the form rather than hard coding these pallet properties we will instead pass
them in as arguments to the action creator itself.
And so I might pass in a name and an amount and then I will refer to those inside of my payload.
So to say name is name and amount is amount.
Now of course if you want to you can shorten this up right here with a little bit of yes 20:15 syntax.
It could go to just being name and amount if you wanted to use as 2015.
But I'm going to leave it very simple and straightforward in the long form.
Like so OK.
That's action creator number one.
So now we need to create a completely separate action creator to model creating a claim and deleting
a policy.
So next up we'll do deleting a policy.
So I'll say Konst delete policy.
So this is going to be a second action Creator that is going to return its own plain javascript object
that has a type.
In this case will make R-Type delete policy sowles say delete policy like so and then for the payload
I'm going to again give it an object that has a name I could hard code the name right here.
Something like Alex or Sam.
But again chances are not everyone is going to have the same name.
So instead I'll allow that name to be customized as a argument.
And now I'll refer to the name inside of that payload Lexow.
All right.
So compare these to action critters right here.
You'll notice that they look just about identical.
They both return a plain javascript object that has a type and a payload just about every single action
creator that you are ever going to write inside of a redux application is going to look almost identical
to what you see right here.
There are going to be freakishly small little variations but at the end of the day it's almost going
to look exactly like what you see here.
So all of the times the code that we are writing with redux is not like syntactically really complicated.
Instead the complicated stuff with three ducks comes from having to understand every one of these different
pieces of terminology and there are different purposes.
All right before we get ahead of ourselves there's one more action creator we need to make.
So the last action creator is to simulate someone creating a claim.
So let's use one really quickly because I think you get the idea now.
So I'm going to create a final action creator down here called create claim and I'm going to pass in
a name here.
And how about an amount of money to collect.
Because remember that is the purpose of a claim.
It is a customer trying to get some money from our company and I'm going to return my action that has
a type of creates claim and a payload with a name of name and amount of money to collect of amount amount
of.
Oh come on money to collect.
Come on.
There we go.
OK.
That's it.
That's all three of our different action creators.
Every single action creator returns a plain javascript object which refer to as an action and that action
has a type and a payload.
So we've now modeled out these first two steps of a person dropping off a form.
And the actual form itself.
So take another quick pause.
When we come back the next section we're going to start to write out some code to model the remaining
steps inside of this thing.
Don't worry a lot of the code we have to go here is actually can go a lot faster than what we just wrote
so it won't be that bad.
All right so a quick puzzle I'll see you in just a minute.