Easy Redux Tutorial: Adding Redux to a Simple React App

so the first thing we're gonna do is remove state from this counter component so we just can't leave these two lines here we're gonna remove the set state from increment and decrement and we'll fill these in later once this is wired up with Redux the count is going to be coming in by a prop so we'll change this death state count to this dub props account when we save the app we see that the count disappears which is expected because it's not anywhere to be found anymore and we're not passing it in yet so we could verify that this change worked by going over to index and passing in count 42 and then we see it appears here but we'll take that out for now because we're going to be getting it from redux soon enough now let's take one small step towards getting Redux into this app by connecting this component to Redux first step there is to import connect from react to Redux and then we use that function down at the bottom to connect the component before we export it if we save this we're going to get an error because we haven't created a Redux tour yet and there's no way for this thing to get any data but this is still a step in the right direction so this function call might look a little strange because it's being called twice here this is because Connect is a higher-order function so when we call it it actually returns a function that we then call with this counter component and that in turn returns a new component that gets exported so we're not exporting the counter anymore we're actually exporting the connected counter so even though we've connected this component to our theoretical Redux tour we haven't told it which data to pull out of the story yet see when you connect a component to Redux it doesn't give you all of the data it has it relies on you to tell it what you need and you do that by providing a function called map state to props this function takes the entire redux state and is expected to return an object where the keys are prop names and the values are prop values so it really does create a mapping state into props let's pretend for a second that the state were passing in looks something like this it's just an object with the single property called count looks an awful lot like the components that we had before so if that's the shape of this state and we want to pass in the count prop from it we want to create a key in this object called count and pull out state odd count now this still won't work because we still don't have a store and we'll take care of that shortly but we have everything set up so that once we do have a state in the right shape this component will receive its count so we've connected the component to redux we've set up the map state of props function now let's go create this door so we're going to switch over to our index.js file and to create the store Redux provides a function called create store so we can import create store from redux and then all we have to do is say kotts store equals create store so before we deal with this error here i want to do one more thing which is to provide the store to our app remember in counter we've connected the counter but the connect function is expecting to see a store and merely creating this door here doesn't magically make it available to the connect function we actually need to use a provider component to do that and that provider component comes from react redux so we can import provider from react redux and then we wrap the root of our app with this provider the provider takes one prop called store and we pass in the redux store now let's take care of this error this is happening because the create store function expects one argument which is a reducer function this reducer function is something that we're supposed to create to tell redux what the initial state of the store is so let's create one of those now create a function called reducer I won't take any arguments and it won't return anything right now which is the same thing as returns undefined we'll pass the reducer in to create store now we get a new error saying that we can't read property count of undefined and this is because state is undefined we're not returning anything from the reducer so the initial state is undefined and when we run this map state to perhaps function this is undefined and this fails so how can we fix that well we can return a value here that is in the proper shape so we can return an object with a count it's a number and now the app is working again we have a counter value of 42 but it doesn't work yet because if you remember we ripped out the increment and decrement functions these don't do anything yet but we are successfully initializing the state passing it down and Redux is now providing the counter with the value so a second ago I mentioned that the reducer is responsible for supplying the initial state for Redux and that's true but it actually does a lot more than that and we haven't fully implemented it here yet the reducer is actually given two arguments it's given state and an action so anytime something happens Redux calls this producer with the current state and the action that just happened and this function is responsible for returning the new state now the first time that Redux calls this reducer state is set to undefined and that's kind of your cue to return the initial State it's one way to do that would be to say if state is undefined turn something here but a nicer way to do it is to set up an initial state above the reducer and then to use es6 default arguments to assign that state when state is undefined now remember the reducer does actually need to return the state it can't just set it here so we'll return the state here and then things are back to working so now we've created the store we created the reducer and we provided the store to the app using the provider component all that's left is to wire up the actions so far this app is pretty lame it doesn't really do anything it just displays a static number and you can't change it a simple app like this counter is great for teaching redux because there's not much going on and you can focus on the pieces that make redux different from plain react like creating the store and making a reducer and passing it down via a provider connecting it to the component and mapping state to props but let me be clear Redux is total overkill for something so simple if you're making a simple app like this or just have a couple pieces of state you probably don't need Redux at all so I don't want you walking away from this thinking that you should be adding Redux to every single app you make or that you're going to be burdened with all this boilerplate for even simple apps with two buttons that's just not true you shouldn't don't feel like you have to use Redux if your app is simple enough and react state works fine for you so that said let's wire up these actions so how do we get actions into this reducer we can't just call the reducer directly well turns out store has a function on it called dispatch and if we look at the redox docs first or says the only way to change the state inside is to dispatch an action on it and if we look at the store methods there's one called dispatch that takes an action and there's a couple other ones that we'll talk about later so we can call store dispatch and pass in an action object now this is just a plain JavaScript object the only thing special about it is that it should have a type property I will say the type is increment and I'm also going to go into the reducer and add a console log it just logs out the action that we get and we'll open up the console i refresh the app we see we get two actions one is this Redux init thing and this is happening when Redux first calls the reducer that's the time when the state is undefined and the action is this redux slash in it and then the second time is our dispatch here so there's no magic going on here this is like this is passing in this literal object into here it's not changing it or anything and if I go and change this you'll see that it passes it in faithfully and I can add other properties to this like an amount property with some number and you can see it's reflected here let me just put this back so now that we have a way of getting actions into the reducer we just need to handle them and do the right thing and we can do that by writing a simple switch statement an action type and when the type is increment we just need to return a new state with a count equal to the old state count plus one and when I save this we see the count becomes 43 because we are dispatching this increment action and it's making it into the reducer and then with state changes the APRI renders now we're getting this warning because we don't have a default case so instead of returning the state at the bottom we'll just move this into a default it's important to always return the state unchanged if this reducer doesn't know how to handle the action that's been given Redux will actually dispatch every action to every reducer in the system we've already seen a preview of this when redux dispatched its Redux init action so make sure to have that default case in place let's also add the decrement action while we're here which will be pretty much the same as increment just change the type and we can change plus to a minus if we save there's no change but then we can duplicate this dispatch and replace increment decrement and then we see the counter is back at 42 so we're almost there all we have to do now is dispatch these actions from increment and decrement inside counter but how can we do that here without access to the store and the store dispatch function like we have here well the connect function actually injects the dispatch function as a prop and we can prove that if we go over to the react dev tools and drill down into our counter component you notice that's getting the count prop map state two props and it's also getting dispatch from connect so when we want to dispatch an action from this component all we have to do is call the dispatch function so let's do that here this stuff props dispatch type increment hey it works then we just need to do the same thing in decrement just copy this line paste it here changing Kermit to decrement and there we go the counter is working then we can just go into index and tidy up a couple things here reset the counter to zero and delete these two dispatches that we're not using anymore and there we go so just to recap what's going on here we're using the create store function from redux to create a store we're passing in a reducer which decides what the initial state is and how the state changes as it receives actions it ignores actions that it doesn't understand by returning the state unchanged and then we take this store and pass it down to our component tree via this provider component which comes from react Redux having the provider in place means that our counter component can connect to redux and pull out data so it uses the connect function from react Redux to do that connect uses this map state to perhaps function that we wrote to take the entire state and turn that into props that it'll inject into counter and it also injects The Dispatch function the injected count prop is displayed here and then when you click the buttons actions are dispatched which gets fed into the reducer and the reducer decides the new state after it returns that state provider takes care of rear end during the app with the new state passing it down to counter and then we see the new value reflected here now provider isn't detecting these changes by magic if we go back to the Redux talks remember these store methods we saw earlier and we're using The Dispatch one there's also one called SUBSCRIBE which takes a listener function and the store will call this function every time the state changes so provider subscribes to the store and when it's notified of a change it tells react to re-render so that's it we've refactored the counter app to use Redux instead of react State

Channel: Dave Ceddia

Views: 71,788

Rating: 4.9598522 out of 5

Keywords: add redux to react app, react redux tutorial, simple redux tutorial, redux, react, javascript

Id: sX3KeP7v7Kg

Length: 14min 1sec (841 seconds)

Published: Sat Dec 30 2017