Learn The MERN Stack

Learn The MERN Stack [5] – Implementing Redux

alright guys so up to this point we have our back-end done that's that's pretty much set off to the side for now and we created basically just a very

simple react component where we have one shopping list component I mean we have our App nav bar but that's just stateless doesn't really have anything to do with anything besides just showing

it so what I want to do is implement Redux so we can create a separate component instead of having this just prompt embedded in our shopping list component I want to have an item modal

component and I want that to interact with our Redux State so this video is probably just go back to this code this one's probably going to be one of the toughest ones to make because of the

Redux boilerplate which I just can't stand there's there's so much to it like just getting it set up once you're familiar with Redux you probably want to have just some pre-made boilerplate that

you use and you just add to your application rather than typing it all out now if you know nothing about Redux at all I'd suggest watching my redux crash course because I'll go more into

depth in that video as to what everything is and you know the a little bit of theory around redux and stuff this vid this is more of just a hands-on project series so I will explain things

you know as I move along but I'm not going to go I'm not gonna deep dive into redux basically it's just our state manager it's where we want our data to be kept in our front-end obviously you

know when we implement our back-end it'll come from the database it'll come from that API and then into our Redux store and then ultimately into our react application but for now we're just gonna

have some static data in the Redux store so enough talk let's get started so I'm going to install a couple things I'll leave the server running and just go to open up a new terminal and we want

to make sure that we're in the clients okay right now I'm inside this the server I want to go in the client folder which is our react folder so let's CD into client ok very important that you

do that you don't want to install Redux on your node server so let's do NPM install our eye we're gonna install Redux we're gonna install react – Redux which is

what binds the two together a lot of people think Redux is like part of reactor or was made with react but it's a completely separate thing that you can actually use with other frameworks or

you can use by itself however react Redux is what binds the two together we also want a piece of middleware called Redux thunk and we're not going to really need this until we deal with our

back-end because it just gives us a different way to dispatch from our actions to our reducer when we want to make a synchronous calls to our server but for now we're not dealing with the

server that will come in a little in a little while but we still want to install it now alright so those are the three things you want to install again it should be in your client so when you

go in your client folder and you go in your package jace and that's where this stuff should show up okay alright so now that we have that installed let's go ahead and in our source in our client

folder in our source we want to create a file called store dot Jas okay so this is like the entry point to our Redux store and if you want to kind of look this stuff up Redux has some pretty good

documentation it's a little confusing but let's a store so store holds the whole state tree of your application the only way to change the state inside it is to dispatch an action to it okay so

we have our store we have actions for when we want to do things like get items add item delete item things like that and then the reducer which will take care of basically doing stuff to our

front-end application like just like delete removing the item or adding the item stuff like that okay so let's let's go back to vs code and let's import a bunch of stuff from

redux so we want create store we want apply middleware because we are using thunk which is a piece of middleware that we need to bring in so we need to kind of wrap

that in the supply middleware function and then this compose because we're going to be using the Redux tools and to use that along with the apply middleware we need to wrap it in this compose

function so the salt comes from redux alright now we also want to import thunk and that's gonna be from redux – thunk and we also want our route reducer so we haven't created that yet but I'm still

gonna bring it in because we will create it so import route reducer from and it's going to be in a folder called reducers and I'm gonna call it index J s so we don't have to do like this since it's

called index J s we can just leave it like that so those are our imports next we want a variable representing our initial state so our initial state is going to just be an empty object and

then we want what I like to do is create a variable for the middleware and put any middleware we use that we're gonna use inside of an array in this case we just have thunk okay then we want to

create our store variable and set that to create store which we brought in above and this create store takes in it's going to take in three things it's going to take in the route reducer it's

gonna take in our initial state and then it would also take in any middleware so we would put like a ply middleware but since we're using Redux tools we want to wrap the apply middleware in this

compose function okay or we want up I'm sorry we want to pass it in to this compose so let's do apply middleware and instead of just putting in thunk since I put the the middleware into this array

here into this variable I'm just gonna use the spread operator and say middleware like that alright now in order to use the redux dev tools we have to put a line of code in here and I'll

show you real quick if we go to our application and we to open up the redux dev tools we're gonna get an error message here that says no store found make sure you follow

these instructions if I click on that link it's going to take us to this page what we need to add is this line right here this window dot double underscore Redux dev tools extension and then the

same thing with a set of parentheses at the end so it looks kind of weird but that's what we need to put in our application for it to be able to to work how we want so we're gonna pick grab

that paste it in if you don't want to visit that page just go ahead and copy this in just make sure you do it correctly all right and then we finally just want to export our store so

Explorer default store and that's it for this file okay we shouldn't have to touch this again at all now let's see in order for in order to integrate the store into our application we need to go

into a pas and we need to bring in what's called the provider and this is from reactor redux ok reacts Redux is the package that basically binds them together so we're gonna import provider

from and if you if you've worked with redux at all you guys probably have seen this stuff before but this comes from react readin redux and then we also want to import our

store file that we just created so store remember we exported default store so we want to import that from that file which is just store ok now in order to use redux in our components in order to in

order to get the stuff from the state and put it into component properties things like that we have to wrap everything in that provider so i'm going to go right above this div and I'm gonna

put in provider and that takes in a property of our store like that ok we have to end that put the end tag down here of Viator all right so now we should be

able to basically access stuff from our state from our components okay so we can share state throughout our components this provides it so let's save that and now what I'm going to do is let's see

what we want to do next we're gonna have a route reducer so let's create inside the source folder not in the components but just right in the source we want to create a folder called reducers and

we're gonna have our route reducer which is going to be a file called index dot JSP have but if we were to add like authentication later on we might might want an author ado sir we might want an

error reducer if we wanted to add I don't know to dues or something we could do it to do reducer so the point of this is it's like a meeting place for all of them so what we want to do is import

something called combine reducers and that comes from redux okay so we want to bring that and we also want to bring in any reducer we don't actually don't want that any reducer that we're going to use

which in our case is just the one item the hell import reducer should be item reducer and that's gonna be from dot slash item reducer which we haven't actually created yet but we will and

then all we have to do is export default and we want to export this combined reducers and then just pass in an object with the different reducers so I want to I want this to be called item this is

how we're gonna identify it from within components when we want to use it and then just set it to item reducer what they do are you spelled to fall wrong all right and so if we had like an auth

reducer we would import that and then we would add it here like off author adieu sir and so on okay and you can have as many reducers as you want so let's save that and that's all we should that's all

we have to do for now so we'll close that and now let's create our item reducer so item reducer ojs okay so a reducer is where our actual state is going to go and this is where we we

check our actions okay we're going to have an actions file that will have like get I like the get items action the add item action and it's going to dispatch to our reducer and it can send along a

payload if it wants so if we were to fetch data from our server fir let's say get items we would then dispatch to the reducer and we would send that that response we get from our server to the

reducer okay and then we would do what we want with it which would be to add it to to react to our component so what I'm gonna do here is let's just create our initial state and this is going to be an

object kay our state is an object and it's going to have an items array okay and this looks familiar because right now we have this stored in the shopping list component which we don't want it in

here anymore I'm gonna just grab this I'm not going to delete it just yet but I'm gonna copy it and then I'll just go like that okay so now it's in here and since we're using this UUID I'm just

going on gonna import that so that it doesn't give us an error and ultimately we're not going to have this stuff here it's going to come from our back end but for now you can see what I'm doing is

I'm just moving the static data from the component to the reducer now in our reducer we need to evaluate action types so we need to create some types so any action that we have like get items add

item delete item we want to have types for so what I like to do is create a folder called actions and notice I haven't touched any any of our components any of

our code that we wrote though that we wrote earlier I haven't touched any of that we're just adding stuff we're setting up the Redux boilerplate so in actions we're gonna have a file called

types a s okay and the types sometimes this will be called constants and that's what they are they're just constants they're they're variables that are set to strings that we export so it's export

Const we'll have get underscore items and it's going to be set to a string of get underscore items and then let's do two more so we'll also have add item basically anything you're going to do in

your application you're probably going to have an action type for so add item let's do delete item and it's just set to a string that's pretty much the same or that is the exact same as the the

variable name this should be delete item because they're only deleting one all right so now that we have these types we can close this up and we want to bring this into our item reducer we want to

bring these types in all right so we'll do is go I'll just go right here and we'll import get underscore EPS gets underscore items let's do add underscore item let's do

delete underscore item and it's going to be from our types file which is up one directory in action so it's not store actions and then types okay now in our reducer we're going to have a switch

statement because we basically oops actually this needs to be in a function so we want to export default function and then this function actually takes two parameters one is going to be the

state so we're going to say state and then we're going to set that equal to our initial state variable of which which includes the items and it also takes in an action ok this action

is going to have this is an object and it'll have a type okay it'll have a type attached to it which is going to come from the actions file which you haven't created yet and I know this if you

haven't really worked with redux this stuff sounds very confusing but once you see it all come together you'll get a better idea of what's going on that's why I said I hate teaching it I hate the

boilerplate because while you're while you're typing it out it just it's freaking confusing so we want to create a switch here and when this action comes in we want to run a test on the type so

remember it's an object so we can access the type with action dot type and then what we want to check for is things like get items ok so this is going to be actually I want to put case here so a

JavaScript switch you want to say case and then the get items and then all I'm gonna do for now is I'm gonna say return and what we're returning is the state and I'm just gonna put the spread

operator in here and what this is gonna do is return whatever is in here okay and I'm doing this for a reason because when we fetch from the API we're gonna change this up a little but for now it's

just gonna fetch this okay it's just gonna fetch this hard-coded data so I'll do get items and then the only other thing I'm gonna do right now is the default which is just to return the

state so return state okay which is this here which is set to initial state which is this okay so it's just gonna return eggs milk steak and water alright so I think that that's all I want to do for

now in the reducer so I'm gonna save this my goal is to get our shopping list component displaying these items instead of just what's embedded in the component okay once we do that I think that you

know things will start to get a little easier so in order to do that we need an action okay because if we look in our component let's look at our shopping list

component where do we just have the stuff embedded in the state here and I don't want that so we want an action so I'm going to go into my actions folder and create a file called item action dot

j/s our item actions plural and this is where our our actions go this is where we watch it actually make our request to the backend but we're not getting to that just yet so we want to import our

types here as well so I'll just copy them from the reducer so I'll grab this and paste that and accept now it's we just need dot slash types because it's actually in the same folder and then

let's do I'm gonna use arrow functions I mean you could do like function get items you know you could do that but I'm actually going to do and you'll probably see this more often is Const or export

sorry I should've did Explorer for that function – but explore const get items and then we want to put equals and then whatever parameters in this case it doesn't take

any and then an arrow function alright and then what I'm going to do is return to the to the to the reducer the type of get items okay so if I save this basically this this return it's going to

our item reducer and it's checking action dot type okay you see how we have type this this is the action now we could put anything in here we could do test in something and in our reducer we

could access action dot test we usually if we say if we're sending something we would put a payload like that and put whatever the response from the server and that would be action dot payload but

in this case we're not actually fetching from the server just yet all we're doing is sending the type and when it hits the reducer when this get items hits which is

going to return this okay hopefully that makes sense so I don't think there's anything else we need to add in here just yet so what we want to do now is we want to call this get items from within

our component instead of having it in the state so I'm going to just completely get rid of this state here because now we want it to come from our Redux reducer our item reducer now in

order to do that we have to do a couple things in this component so we need to import what's called connect ok now connect comes from react Redux and it allows us to basically to get state from

redux into react into a react component and we're also going to want to import that get items action so let's say import get items and what I'm talking about is this here this get items

function we want to import that and that's that's inside the actions folder in the item actions file so let's say from and we want to go up one into actions and into item actions okay now

when we use connect like this what we have to do is instead of exporting the actual class of the component we want to export connect and then we want to setup parentheses and then another set of

parentheses that wraps the actual component name like that okay and then this connect is basically it's going to take in two things in this situation it's going to take a function called map

state to props which we haven't created yet we're actually going to create this function next it's going to take in it's going to take in any actions that we want to use in this case get items okay

which we brought in above now this mapped state to props what this does is it allows us to take our items state in this case this is our state and we want to basically turn this or map this into

a component property so that we can use it in shopping lists so we want to be able to use it as this props dot items okay so to create that function we'll just do that right here

will say Const map state two props and we're gonna just use an arrow function it takes in we could put parentheses here takes in a parameter of state and then we want to set this to a set of

parentheses and then pass in an object okay and in this object we want to set item and we want to set this to state dot item and we're using item because that's what we called the the reducer if

we look in our route reducer right here we set this to item alright if I set it to post then we would call it post or whatever so back in our shopping list component we're almost done here one

thing that we should do is add our prop types so we want to bring in prop types up here and this isn't part this isn't actually Redux prop types is just part of react whenever you have component

properties you should put them inside of prop types which basically is kind of a form of validation so we're going to import prop types from prop – types and then down underneath our class under the

shopping list class or a component whatever you want to call it we want to do the name of it which is shopping list the name of the class dot prop types so lower case P prop tie-ups

should be lower case P prop types and then we want to set this to a set to a set of curly braces and then we basically have two props in this component we have get items which is

actually going to be a prop this action that we brought in get items ok we brought it in up here the when you bring in an action from redux it's going to be stored as a prop okay so to be this dot

props dot get items so we want to add that to our prop type so we'll say get items and we basically just want to set it to prop types dot and then funk because it

is a function you want to put the type and that's the whole point of prop types is to set the type which is a function we also want to say it is required all right and then the other prop that we

want is item and we're gonna set that to prop types dot and this is going to be an object okay this represents our state which is an object so let's say is required okay

and when I say represents our state it is a prop but we're mapping it we're mapping it from the state okay so we're mapping this the Redux state to a component property and I hope this is

coming across you guys it's really hard to explain so the only thing left to do now is run get items because once we run it it will send this the action type to the to the it'll dispatch that to the

reducer and then it should just read basically return our state it should return what's up here and bring it into our component so the way that we want to run that is within a lifecycle method

called component did mount so react has these lifecycle methods that run at certain points this one runs when the component mounts that's usually when you want to if you're making an API request

or anything like that if you're calling an action this is where you want to do it so we can simply say this dot props dot get items and that should call it so now we'll the moment of truth we'll

go ahead and save this let me just go back to our server here make sure and don't don't mind these when it says is defined but never used just because we define these at these types these action

types so we haven't used them yet so let's see if let's go back to Chrome and see if the state is actually showing which it's not cannot read items of null and the reason for that is because if we

look in our render we still trying to pull the items out of the component state when we say this dot state this refers to what we used to have here the component state but what

we've done is we've gotten rid of the component state and we're now taking the state from our reducer from our store and we mapped them to props okay we did that here we set it to this item prop so

the way that we would access the items is by saying we just go right here is by saying this dot props dot item dot items which looks a little funny but item actually represent the entire it

represents the entire state object items is the array inside the state if we look at our reducer item represents this whole thing items is the actual array so what we could do instead of having to

type this stuff out down here as we'll just use D structuring like we did right here so we'll say this dot props dots item okay so this is now where our state lives in redux and we're pulling it out

we're pulling out items from it so now if I save that and we go back to Chrome there we go so now it's it's displaying it you can see in our Redux dev tools it called get items if we look in our state

you can see we have the item this is basically our reducer item state and then the items array that holds everything all these these items here alright and just to make sure we can see

the last one is water and if we go to our reducer the last one is water I'm going to change it to candy and save and go back to Chrome and now we should see that change and you can now see that

it's coming from redux as opposed to just right in that component that means that we can access the state from any other component that we create okay hopefully that makes sense now

if I click one if I try to delete you can see it cannot read items of no because let me just reload this in our delete okay this is something we're gonna have to

when we click let's see where is it this is now that's the ad button we click the delete button we're still looking in state items and then we're calling filter on state items which doesn't even

exist anymore it's no same thing if we try to add it's going to try to set the state of the local component so what we're going to do in the next video is we're going to

kind of first of all we're going to make it so that we have a delete action so that we can then just dispatch to the reducer and have our delete item and get rid of whatever one we delete we also

want to create a whole new component to add an item we don't want to use this this prompt here we want to create a nice modal that we can that will display and we can interact with our Redux State

okay with the the item reducer through that component and then add it and it'll still show up here in the shopping list component okay so I think that's going to be it for this video guys I'm sorry

if it was a little confusing it's just a little hard to explain but in the next video things should start to make a little more sense

In this video we will add Redux to our frontend app and move the state from our ShoppingList component to a store reducer. We will also create our getItems action and action types.

Code:
https://github.com/bradtraversy/mern_shopping_list

MERN Stack Front To Back Udemy Course:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia

The Developer Hangout: Public Discord Server
https://discord.gg/developers