The section we had a long demo of redux.
We're going to continue in this section by trying to answer that one burning question that might be
in your head which is why in the world would we ever write code like this.
What's the point.
Why do we have actions and reducers and stuff.
Why don't we just split the string and be done with it.
Hey that's a fantastic question and that's probably the most important question there is with redux
all these actions reducers store stuff.
What is the point of it.
Let me tell you what the point is in one sentence.
I'm going to try the rest of this course to convince you of this one point.
Redux is one of the best libraries in existence for scaling an application to be very large with the
least amount of code complexity.
In other words as your apps start to grow start to get more features redux will help you write code
in such a fashion that your code doesn't also have to grow in complexity.
So that's the point of Redus.
But why is that the case.
You know how can I make that claim easy.
I can easily make that claim.
The answer is the action system.
This whole process of dispatching an action and receiving it inside the reducer with Reebok's actions
give us the ability to make predictable changes to the state of our application.
We will never ever reach directly into our store you know reach directly into this thing and start messing
around with a state that is contained within it.
Instead we will create an action and actions modify our state in one very particular way.
That means that we can only modify our application state in a very finite number of ways.
Now at this point in the OP I can only change my app my state in my state object which I retrieve via
stored die state in exactly one fashion.
Via the action that we wrote right here the action with tyed split string.
Because I only have one action I know without a fact with absolute guaranteed certainty that my application
will always have a state of either empty array or.
I think I lost a good state on here let me throw it back in really quick.
My state is always give me either an empty array or an array with some strings inside of it.
That's it my state will never be an object a string a number a boolean nothing else.
I will only ever have an array or an array of characters.
That's it.
Now that's my case for using redux But for right now we should be a lot more concerned with exactly
how it works.
So let's review the code we've got so far.
First we created a reducer
lost my spot.
There you go.
First recruiter douceur.
Here is a function that produces some amount of state number.
Then we created a store and passed it that one reducer.
So we now have an instance of a store that contains one reduce error and the state that that one reducer
produces.
So by default if we call get stayed on that store we got back an empty array because that is what the
reducer produced.
Next we made an action.
The action is a very specific directive to tell the reducer how to update it state in a very particular
fashion so our action was of type split.
String to the typewrite.
Here you can think of as being like the command or the direction that we're issuing to the reducer and
then we also passed along a payload property.
The payload property is the data that we want to communicate to the reducer so we can read this action
in plain text more or less as hey reducer.
Please split the string.
And here is the string that I want you to split.
Next we sent that string off for that excuse me that action off to all of our reducers by calling store
dot dispatch with the action when we dispatch an action as refer to it.
The action will get automatically sent to all of the different reducers insider application so let's
experiment now by adding another action.
I wanted to make an action that will take my current array of characters which is a SDF and I want to
just add another character at the end of this right.
So I want to have an action that modifies my state by adding another character to the end of the first
real defining action.
So I'll write out my new action and I'm going to call it very simply action to
remember that actions are objects.
They must have a type property I'm going to give is why type property of add character and then a payload
of a.
So if I read this like you know read this in a very literal fashion I would read this action too as
meaning please add another character to the end of my state array.
And that character to add should be a K so that's basically the idea here.
So now we're going to dispatch this action.
Remember that by just creating an action nothing nothing actually occurs by just creating one we have
to actually dispatch it dispatching an action sends it off to reduce or reduce or we'll rerun and whatever
this reduce or returns becomes our state inside of our store.
We can then retrieve that state by calling store doc state.
So now we're going to dispatch the action by calling store dispatch action to
again when we pass an action to the dispatch method.
It gets sent to all the reducers that are hooked up to our store.
In our case we've only got one right here.
Our seducer will then immediately rerun.
So this reruns right here and return a new updated updated piece of state the store.
Notice though that even though we added in another dispatch Let's check our state really quick if I
call store don't get state my state inside of my store has not actually changed and nothing has occurred
yet.
I still just have a state of a SDF that's all there is right now.
So I notice our producer has decided that it does not care about the action that was dispatched.
So we just ignored it entirely.
This is a really important fact.
It means that if we have multiple reducers in our application E-Street user will be called with every
dispatch action.
So it's up to us to make sure that this reduce right here watches for actions of a very particular type.
So in our case we want to make sure that this reducer also responds to an action of type add character.
So to do so we'll add another if statement in here or another catch say.
Else if and Dot type equals add character
then I want to add that character to the end of my array of characters right here.
Is it like this a SDF that means do I need to already know what this producer returns the last time
it ran right.
I need to know.
OK.
I already dispatched one action and my current state is a SDF and now I intend to add on a character
to the end of that array a character a.
So how do we get access to that previous array.
How do we get access to like that previously calculated piece of state that is the job of the first
argument to the reducer which we have labeled as state here.
Reducers rerun many times throughout her application and each time they are called they are past the
result of the last time they were called as the first element which we by convention refer to as state.
So again each time we dispatched an action we are making an incremental change to the state of our application.
So now inside of here we'll take our state and we'll push on action not payload and then return that
modified state now or get state call returns SDF and a.
So is the new character that was appended out yet.
Let me pause for a moment though and I want to say that I just made a huge huge error in the code that
I just added right here something that is very subtle.
I want you to take a look at the two lines that I just added.
I took my current state object and I added in another character to it using push and then I returned
that object.
Now sure that seems like an OK thing to do right.
Like Stephen you said we need to add in a character to the end here and not.
Not quite.
So this is the one big rule of reducers whenever we change our state object and reducers like whenever
we make a tiny very subtle change we must return a completely new object or a completely new array or
whatever data structure we might be using.
In other words we do not mutate our data as we did right here.
Instead we create a completely new data structure the code that I wrote right here mutates our existing
state terrain by calling push on it some taking his existing array and I'm modifying it which is not
what we want to do.
We are going to in a future sexually and talk in great detail about why that's the case for right now
I just want to kind of plant it in your head like this you know like seed of a thought that we do not
mutate our state and to reduce or instead we completely recreate recreate it.
So to fix this I'm going to replace these two lines with a little bit of six code.
I'm going instead write return and I'll open up an array.
Dot dot dot state comma action dot payload and then close off the array like so.
This line right here now says make a new array.
Indicated by these outside brackets take all of the elements in the current state array and toss them
in here.
And then also Tolleson action not payload as the last entry as well.
More importantly it creates an entirely new array which is the requirement that we must satisfy with
redux inside reducer.
Now again we'll talk about why this is the case in the future but for now just remember the golden rule
we always return brand new objects from reducers.
OK so believe it or not I'm sure you're still incredibly confused but this is the end of our very brief
introduction to redux.
So I absolutely in no way shape or form expect you to be a master of redux at all.
Not not one bit.
In fact I'm going to continue with the next section by assuming that you know absolutely nothing about
it.
Redux is tough it's hard.
It's a different way of thinking.
So we're going to take things nice and slow.
The only intent I had inside of this section and the previous sections was to introduce you to the ideas
of a reducer an action dispatching actions and pulling a state out of our store.
OK so that's those are the big takeaways here.
That's all I really want you to get this.
We're going to continue now in the next section.
And again I'm basically going to assume that you know nothing about redux anyways so let's continue
on the next application and continue working on our actual re-act native application.
I'll see you there