How To Add Redux To Create React App (1/3)

today I'm going to show you how you can add Redux into the create real app boilerplate this is going to be a tutorial where I will start from the beginning with a the simple Korea app boilerplate and then slowly I will add Redux into the system and in the end we're going to build a very simple shopping cart just to demonstrate that Redux actually works so let's get started to say sometime I use the korea app command on the command line to create a boilerplate projects so if you're not familiar with how crea app works i have a tutorial in the link and you can follow to get yourself familiar with it now I do assume previous experience with Redux at least you know have some idea how it works so I'm not going to explain everything in the setup so if you want to know more about redux I suggest you read about it on the redux document excellent documentation website so let me open up the project right now and this is a very bare minimum project and it will it doesn't have Redux or anything in it so we are going to install Redux to this project now the first thing that we're going to need is the redux the actual redux npm module and then the second module that we're going to need is the react redux module so i'm going to open a new tab and then we I'm going to install these two modules so first we get the Redux module and then save it to a package Jason I've started the app meanwhile and then the other module we're going to need is the V app redux module so it should be installed pretty quickly and if we go into package Jason we should see the modules making stuff so great we install Redux into our projects and we need to create some folders so let's go into the source folder and then we'll set up a basic project structure for redux so this is something the community knows about and I'm just going to follow what the community has set forth so it's going to be a few couple of folders we need an actions folder components folder and a reducers folder and then we're going to I'm also need to create a file called storage is in the root source folder now let's pop we have a couple of folders set up and then we have the store set up let me populate the content of storage areas so we need to import create store Brown Redux and then we're going to need route the reducer that we're going to create later on don't worry that this file does not exist in it we are going to create it and then we're going to just explore this file so state and then the system to be an arrow function and it will return traced or we're going to create a store with the route reducer and the initial state great we have our reducer set up now so for we need to create our the reducers that it's mentioned here so this basically takes all the reducers from this folder and then import it here so in order for for that to happen we need to create the absolutely losers so let's go to reducers folder and then create two files one of them is called indexed areas and then since we're going to make a shopping cart example we're going to need a cart is so it's very simple for these things we are going to create for the index reducers this will basically take all the reducers from the folder and combine it into this we'll into a route producer so I'm going to import cart from car to s and then I'm going to need this helper function called combined reducer the users from redux this is a handy function the author we got may we can use it by like the following line reducers then we're just going to say cart so this is just this is a shorthand syntax this is place to be the same thing as that so you don't have to do that es six and now I'm just going to export the function now this this is done so this is going to be using store now we need to define cart the cart reducer so I hope you are familiar with how reducers work we're basically going to do a an action where you add an item into the cart so this reducer will handle what happens when somebody adds an item to the cards so let's define this reducer module so x4 default it's going to default export the function so we read actually always need a stake a default state and then the payload this is the idea that's inherited from flux come from Facebook so we are going to basically switch the payload and then we check what it's doing if it's saying you want to add something we want to then we should return whatever the original state is plus the item that's being added to the cart and therefore a default case we're just going to return whatever it is in the item so this is the basic basic reducer which will add whatever it is in the paedo into whatever it is in the state of the shopping cart so now we have the reducers set up we are going to create some actions so actions are really simple it just tells the pro to flow like what is it going to do so I'm going to create an action call Add to Cart j/s so this file will oh it will only do one thing and which is creating the payload for the reducers so we are going to do export Const add to cart this is going to be the name of the function that we're going to call when we when we let's say have an on click button later on when we have click on the item it will call this function so this function expects an item as the parameter and then just for debugging I'm going to cancel log the item start with this handy little shortcut key so this will log every time this function is being called so an action all it is it's an object it returns an object with the type this is the thing that we're evaluating in the switch statement and then the actual payload so I'm just going to pass in the item so it could wondering when you click on a button in the UI it calls this function and then this function goes to reducer and the reducer will based on the the action type it will execute the proper branch of the commands so now we have the the actions created let's create the UI for our components for our shopping cart so in the components folder I'm going to create a shelf that is the Shelf jess is going to be the and it will display a list of items that is on the shelf so we can add to our cards so the shelf component will be very simple you will basically let me just take the base coat on apogee s and then space it in here so it's not going to have a lot of things it's going to be very simple so we have a basic shelf components set up and this component will have very simple logic so for let me change the spacing here so since this is going to just render a list of items that's all you will do so I'm going to make it very simple so in the beginning it will have a constructor props then this is the standard react stuff now you have to do this toss date I'm going to define a list of items for the shelf so I'm going to make in an array let's call this shampoo and then chocolate then maybe yogurt so this is going to be your list of items that this video was brought to you by digital ocean the best cloud computing service design for developers start your private server in as little as one minute choose from wide selection of preview images such as note lamp docker and WordPress post it on multiple regions around the world use the link in the description below to get $10 off when you sign up I'll see you in your next video [Music]

Channel: Pentacode

Views: 15,818

Keywords: reactjs tutorial, redux tutorial, create react app tutorial, create react app redux, add redux to react, how to redux react, reactjs redux integration, beginner react redux tutorial, how to react redux app, redux middleware, javascript reactjs tutorial, javascript redux tutorial, javascript redux reactjs, javascript beginner react tutorial, react redux how to, create react app redux add

Id: eN6CfnTDsQc

Length: 12min 49sec (769 seconds)

Published: Thu Jan 05 2017