And welcome back.
Now that we have redux and react redux installed, let's start writing some code and implementing redux.
Now the first thing we want to do is create something called an action and also a reducer.
If you remember this diagram we mentioned that redux has these two components: an action and a reducer.
So we're going to build those two out and show you what I mean.
The first thing we want to do is create a new file.
Let's just keep it in the source folder and we'll say that this will be called Actions.js
and within here we're going to create an action using just plain old javascript.
We're going to say that export const and the first action we're going to do is the search field.
So remember when we type into the search box we can filter the robots. We'll say that that action which
is on search changed that we had in the react app, we'll say that this is going to be called SetSearchField
and this search field will receive an input of text which the user types and because we want to
keep this as small as possible we can actually wrap it in curly brackets so that we can avoid the return
statement.
We're just returning an object and this object is going to have a type
called let's say CHANGE_SEARCHFIELD.
And we'll also have a payload called text.
So that is, this action is going to - which is called Set search field - is going to take text, which is
what the user inputs, and it's going to return an object that has a type of CHANGE_SEARCHFIELD.
So that's the action that's being taken and it's going to send - and payload is a common name that is
used and redox so just get used to that - payload is we're sending whatever data is needed to go on to
the producer which is just going to be whatever the user enters.
All right.
We just created our action.
That's it.
That's our action.
Nice and simple.
Now in here I've capitalized this because it's a constant and a constant is usually capitalized.
All caps in javascript is just the standard but I like using an actual constant variable because with
just a string we can misspell something and we might not get the error.
But if we use a variable and we misspell it will actually get an error when we're running the app.
So it's a nice little nifty trick.
And most redux demos have a constant file aswell where they keep track of all these actions.
And it's also nice to have a file where you can see what your actions are.
Line by line because most apps will have more than just one action as you'll see.
So let's create a new file and we'll call it constants.js.
And within here within just export - let's make this a little bit bigger so you can see.
There you go.
We're going to export constant CHANGE_SEARCHFIELD.
And that's going to equal our string.
Again the exact same thing CHANGE_SEARCHFIELD but the string.
Seems a little bit redundant but it's just good practice to have.
So now that we have this variable which is a constant and because we're exporting it we can just import
it up over here.
And we'll say CHANGE_SEARCHFIELD make sure that there's no spelling errors this way and we'll say that
import from the Constants file.
And let's make this a little bit smaller just so everything fits in.
And there you go.
So now we can use the changed search field instead of the text.
And there you go.
We have a nice and good looking actions file with the SetSearchField action and you can imagine here
as we get more and more actions we can keep adding things and we keep adding all the constants that
we need for the actions that that our app takes.
All right.
The next thing that we remember with redux is after the action.
We also have a reducer which I said is a big function that just reads the action and spits out what
we call state.
So let's do that, let's create another file here we'll call it reducers.js
and within here, let's create that reducer. We first start off by saying const initialState.
So we need some sort of start point.
So you may remember in our app.js file with create react app.
If I open that up we see that we have initial state with search field that is blank.
So similar to that we need to say that the initial state here is going to have the search field
that is equal to an empty string.
So that's the initial state.
That's the initial object that we'll have in the redux store.
And now we need to create the reducer. Again.
Remember it's a function that's very easy to do again because we're going to use it in other places.
We're going to export it and we'll say that this is going to be called a search robots because that's
the action that's taking it's going to search the robots using the search field.
So this search robots reducer will take in a few things.
First is a state which is the state of our application and then the second thing is the action.
So that is what action just happened.
And using ES6 let's just give it default parameters to make sure that if this is empty or action is
empty We're not getting any errors.
So we'll say that state will be the initial state which is why we have up here and then action is just
going to be an empty object.
Remember our actions are just objects that were returning.
So from here using error functions we have our first reducer. And reducers here, what they do is they get
this input of a state and an action.
And if they care about the action that they receive in our case if we care if we receive any actions
that are related to searching robots we're going to do something we're going to act upon the state the
way we're going to do that is we're going to use a switch statement and we're going to say within the
switch statement that we're going to do an action.type
remember action.type.
That's something that we use in the action.js file..
Remember we have a type of change search field.
So looking at this it looks like we're going to care about the change search field action type.
So let's just import the constants file up over here for redux or for our reducer aswell.
And within here we can say that if the case that the action type.
Whoops let's just do CHANGE_SEARCHFIELD
If that's the case, well we want to return a new state and this goes back to the three principles that
we talked about.
Let's have a look.
The three principals in react is that we have the single source of truth that is the one big object
that describes our app.
So we have our initial state variable that we've set. State is read only.
That means we can never modify that object.
The only thing we can do is create a new object that has, the same as before, the previous object the
previous state that we had, with whatever modifications we had so state is Read-Only.
And then the third thing is that changes only using pure functions, now remember pure functions are functions
that get some sort of an input just like we have in our reducer and return an output that doesn't have
any side effects.
That is it doesn't modify anything.
Every time we enter an input it always gives out the same output.
So based on these principles if we go back, we know that we want this reduced to be a pure function that
is it's taking some sort of an input and it should return a new state, and the way we do that without
just doing state.SearchField and modifying that property we're going to do object.assign.
And the way we do this is curly brackets comma the state that we're receiving which is the initial state
the start and then finally whatever we want to change in that object.
In our case we're interested in changing the search field property and the search field property is
going to have the action.payload.
Again let me just make this a little bit smaller.
We're returning a new state as you can see here with object.assign that's going to have everything in
the state.
Plus we're going to update whatever search field property, new search field property we have with action.payload
Remember actions have two things that were sending: an object with type, and an object with payload.
If we go back we see type and payload.
So this is simply saying we received an action called CHANGE_SEARCHFIELD.
If that's the case then return the new state with action.payload whatever the user has entered.
I know it can get a little bit confusing but this is just standard redux syntax that you'll just have
to get used to.
Just a heads up.
There's another way of doing this that some people like and is cleaner.
Another option is to do object destructuring or object spread operator which means that we can do something
like this.
Which works nicely as well.
For now though let's just keep it the way we had
and then always remember that a pure function always needs to return something.
So in case that the action type is not this, we also want to say default to always just return state.
There you go.
We've created a reducer.
That is a pure function.
Now here we could use an if statement if we want, but I like using switch and react documentation also
recommend switch because you can have multiple cases, multiple actions that act upon the search robots
reducer and it's a lot easier to just add on and add on different things that affect the state of the
robots.
All right.
That wasn't too bad right.
We've created a reducer with some initial state and we also have our constants and actions.
So that diagram that I showed you is starting to make a little bit more sense. In the next video.
Let's actually connect these because right now it's not connected to anything it's not connected to
our apps, to our react up.
We've just created these files that kind of live on their own.
I'll see you in the next one.
Bye bye.