React, Redux & Firebase App Tutorial #12 - Adding Dummy Data

Key Takeaways

alright then so I did say that you wouldn't see this diagram again but here it is rearing its ugly head once more but I just want to use it to explain how we're going to connect to our relook store and where we're going to get data from and how we're gonna sync our app with the redux door so this dashboard right here this is listing all of the projects right now we're not going to reach out and grab data from this thing right here we're going to grab it from the dashboard and this is our container component then what we'll do is pass the data as props to the project list and then to the project summary okay so that's what we're going to do in this tutorial but first of all we need to create that dummy data on our store so to do that let's go to the project reducer because we're going to create some dummy projects and in here what we'll need to do is create a projects property and this is going to be an array of different projects now I'm just gonna paste a series of objects in here but I'll show you what they are now so three objects each one has a unique ID a title and some content so three simple projects right so now when the application first starts and the reducers first run this is going to set the state equal to the initial state to begin with then it's going to return that now in the root reducer we combine the reducers right so the project reducer here all that information is going to be stored on the state on a project property all right so this stuff right here is going to be stored on a project property on the state now we want to access that from our dashboard component so let's save this first of all then head over to our dashboard component so let's get rid of these we don't need these reducers anymore and open up components and get the dashboard so now we want to connect to our store now we've seen how to do this in a previous tutorial series and it's as simple as importing connect which is a higher-order component from the react Redux library remember this is the glue library which glues redox to and that's what we're doing here we're connecting the two together we're going to connect this dashboard component with the redux tour so then down here this is where we can connect connect is a function which returns a higher-order component to take in the dashboard so now we need to somehow map our state from the store to the props in this component now we do that by creating a function and this function is going to be called map state to props so this function right here takes in the state of our store we have access to that and then what we can do is return down here an object and this object is gonna represent which properties are attached to the props of this component so then we can access them inside this component so we want to create a property called projects on the props now this is going to be on the state object then remember if we open up the reducers again go to the root reducer it's going to be on the project property of the state first of all so state project then inside that project object we have this property right here projects so that's what we want to access so project projects I hope that makes sense and that's what we're grabbing and we're attaching to a project property inside the props of this component so we need to pass this function as a parameter to connect so the connect function knows what to connect to what data to get from the store we're mapping that to our props object in here so now what we could do is access props to projects inside this component and it would get us this data okay all right then so first of all let us just console dot log and this dot props so if we save this now and view in a browser I'm on the dashboard over here now and we're going to inspect and go to console and we see the props object now down here we can see a project property because this is what we wanted that to be called on the props object and inside a we have access to those projects so we have the data now and what we need to do is take this data and we need to pass it down into the project list component right here so that that can access it and output the correct projects so let's just comment this thing out for a minute I'm going to use a bit of destructuring now to get the projects I'm going to say Const and then projects is equal to this dot props so that just grabs the projects object off the props you don't have to do this I just like to do this and then what we can do is pass those projects down as a prop into the project list component so projects equals projects these things right here and now we're passing them down into this component so let's open up that component project list now we have to receive those props inside this component so I'm going to use some destructuring directly in here to grab the project's like so and that's grabbing the project's property off the props that we receive inside this component and then what we can do is cycle through these projects right here and output a project summary for each individual project so let's get rid of these for now we don't need these anymore and instead what we'll do is map through the project now in previous tutorials I've done all of this stuff directly outside the return statement bot just for a change I'm gonna do it directly inside the return statement so I'm going to open up my curly braces and then I'm going to say projects double ampersand projects dot map and I'll explain this in a second each time around we take the project in a function and we'll do something so first of all why did I do this bit well if I just say projects dot map then we might not have any projects to begin with or until our component reaches out to an external database in the future we might not have any projects so by adding this at the start oops by adding this at the start is saying ok if we have projects then I want you to do this if we don't have projects then don't bother doing this map thing because there's nothing to output make sense so that's why we do this at the start okay then so we're mapping through the projects here and we're taking an individual project each time we cycle through the project array okay now what we want to do is output some JSX for each individual project so I can just return that directly in here like so and what we're going to do is return a project summary for each individual project right now we don't need to do that right there what we want to do now is pass down as a prop the individual project so we can pass that down like so we're grabbing the project that we're currently iterating across right there passing it down as a prop into project summary like that and the key is going to be the project ID so we can say project ID and then we'll close off that okay so basically what we're saying is we're taking the project as a prop we're cycling through those projects if we have some and then each time around what we're doing is returning some JSX were going to output a project summary which is this component and for each project summary we're passing down an individual project and assigning a key value so now inside the project summary we receive an individual project each time so what we can do instead of output in this text we could output dynamically project dot title now we don't have an author field or a time field just yet so we'll leave these as is but at least now the project title will be directly output so let's just save this and view this in a browser and now we can see the projects that we had in our store they are being output to the Dom over here so that's pretty cool right we've now connected our application to our Redux store and we're grabbing data inside our dashboard from that store and we're passing it down into the project list and the project summary components then outputting it to the Dom now in reality we don't really want to use dummy data like we have done we want to use some kind of external database and to do that we're going to have to start using ace Kronus cold and we're going to have to use that within redux somehow because redux is keeping track of our state of the application so in the next video I want to talk about how we can use asynchronous code with redux