Welcome back everyone. For going on I'm here in the documentation for Redux for the method createStore. We forgot to define a initial state so obviously when you have the createStore you can define an initial state as the second argument. Let's go back to the editor text editor. I'm going back to index.js where we had the createStore. Right now if you look at the reducer it's just pre-turning state but what is state? Actually, you forgot to define the initial state. One way to do that you can put it as a default argument right here. If state is undefined it will be an empty object. That's one way. That's particularly okay commonly used when you have like a reduced composition, multiple subreducers which are then combining two one. Or you can just define the initial state to be just an empty object right here as the second argument to the createStorm. Okay so that's just that detail that I forgot to mention in the previous lesson. So make sure to set an initial state right here or in your... default argument. Anyway, let's keep going. So let's look at the steps where we are. So we generate the project using createReactApp. We're good. SetupRedux. We did set up redux. So just can't access anything yet because we're not using connect. Then we haven't done this part. Actually, we have to kind of skip to the number four in order to be able to kind of have redux set up all in good and to be able to test it if it's really working. This course is not so much about redux. It's about redux saga. So I think I'm going to kind of keep a little... not go too slow to set up redux. Alright, if you don't mind. I assume you already have some previous knowledge of redux and you're here just to learn how to use redux saga, the mirrorware. Anyway, so going back to app right here. What we want to do is be able to access the state, the application state, not the component state, the redux store, right? How can we access that? So there's a helper called connect from react redux. If you don't know about it, I assume you already know. You can always look at... look up at documentation, react redux. It's always good to look back. In case you forget. Where's that? The github page for react redux under the redux.js account. Official react bindings for redux. Grid. Scroll down. We haven't installed it yet. So let's look at the react redux site right here. Quick start. Provider connects. So we already got provided as you can see. Now we're gonna do connect. So we already did provide it with a store. Now there's the connect function we're gonna do, right? So connect function, if you remember, it takes first argument maps state to props and the second argument map dispatch to props. None of them is absolutely required. You can pass null if you don't have... you don't want to access the state and you don't have to specify maps dispatch to props if you don't need to emit or dispatch any action. Okay, so let's keep going. I'm just gonna close this. You go back to the text editor. So we are here in the app component. So what we're gonna do is the following. We have to connect our app to be able to access the redux state. I'm gonna go up in the bottom here. You're gonna import, open and close curly braces, connect from react redux. But did we install it? We haven't. So let's go to the terminal. Oh, actually we did. Sorry. We already installed react redux. So we're good. Let's go back to Adam. We got connect. Now go at the bottom when you export the component. You're gonna do just connect. So connect is like something like what do you call it? Curing. So you call connect first and it gives you something back and it's a function. And that function you call it again and pass the component and that will give you the component with all the... with the... for example, whatever you want to access in the state in the maps state to props injected as prop props in the app component. So let's do it. Let's do the following. Let's make a variable right here. All maps state to props. So maps state to props gonna be the first argument to connect. And this is just a function that takes one argument state and returns an object. We're gonna return an object. This object will be the properties that will be injected in app and you can access from the state. Okay. So say we don't have it yet so we should add the fruits but let's just leave it as is and let's do maps state to props right here. So we're gonna map a state to props for app. Now we don't have anything so let's create it. Okay. So what we're gonna do now right now is create the state for to hold the list of fruits. If you remember our data structure like this. So we have an array of objects. Each object is a fruit. Okay. So we're gonna keep in the application state an array of objects. Let's call it fruits. Okay. So if you go here. Sorry. Let's go to our index.js. Now the readjust is defined here. Normally we would define in a different file to organize and maintain things better. Let's just let's extract this to a file. Let's make a file right here. Let's call it reducer.js. And then reducer.js is gonna have a reducer. So this app is pretty simple. So let's just have one reducer instead of having many. Okay. Does that sound good to you? So let's go to reducer.js and paste that reducer. Now I'm gonna export default this guy. Actually you can do it right here. Instead of doing that you do module exports is reducer. Let's see if that works. So we have the reducer defined here. Then you export it as the whole thing. Now going back to index it doesn't know what reducer is anymore because we remove the definition. So what we have to do is go here and import reducer from where is it? It's on dot slash reducer.js. You don't have to type dot.js if you don't want. Like so. So we got that. Great. Let's test and see if nothing failed. Notice I didn't save app yet so I did not save it so I won't get any errors just yet if I did something wrong. Let's go back to react app in the browser. Let me clear this. So we still have fruit list right there. So no problem right? Check the terminal to see if your server doesn't have any problems. No problems. Compile successfully. Great. Now what we have to do now is finally let's get back to what we were doing before. Let's define the initial state here to have the fruits. Now you can do it here or you can do it in the here. I'm gonna do it here because it makes more sense to me and later as your app grows you can split into sub reducers and so on. Half different initial states for each sub reduce. Anyway let's define a variable right here. All an initial state and this is an object that's gonna be have the property called fruits. Now for the time being let's just copy the data we have here from our fake database. Okay what I'm gonna do is for the following. I'm gonna copy this array objects right into the reducer because it's fake data for the time being so we can know that we can see that we hooked up, redux and everything as well. Typically this would not be the case. You would initially have no fruits at all. You would have to make HTTP request, obtain the data and then you set, you take that data and you put it in application state right? Redux application state. Anyway I'm gonna copy this. It's an array of objects. Each object has a property called ID and a property called name. Let's go back to the reducer. I'm gonna paste it here okay. Now since I had JSON the quotes don't matter here. It will be just fine. It's up to you to have it or not. So look closely what we did an array of objects with ID and name properties. Just fake data for now and that's going to be initial state of our application for the time being. Now that's great. Now this variable you need to use it. It's an object that will define the initial state. When it hits this reducer you're gonna use the default value here initial state. Okay so when this reducer is hit and the state is undefined it will take this initial state and return that. So now to do this I think state will not be defined will be defined actually because we define an index.js right here remember. So I'm gonna remove this. So it's gonna be undefined okay. I'm gonna create star reducer with anything at all. Let's go back to reducer here. So it seems like everything is okay. Let's save it. Now we're good here. I think let's check if there's no errors in the browser. We're good and then here in the terminal. Fine. Now I would like to for us to take a break right now and before we go let's review what we did. So we are in the process of hooking up Redux to our application. So back to index.js we had this great store. We had forgot to set the initial state and we set it and we remove it again because we already did. We isolated the reducer into a separate file and we define this initial state for this guy with a property called fruits for the time being it's gonna have some fake data right here so we can see later that the everything went out well in our setup of Redux. It's an array of objects with property ID and name. Good. Then we use it as the default value for the state because initially it will be undefined. So we export it and we use it from index to create the store. Now app is under provider that we're gonna go back to app in order to be able to access that state that application state right. We have to use the connect helper from the react Redux package. Now connect helper takes as the first argument maps state to props. It's just a function whose our argument is the state and then return some properties that will be injected into the application. In this case that will be fruits. We're gonna do it in the next lesson. Alright. Until then.