This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Creating the Sweat Book Root Component Solution Part 1" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: So basically what I did here was if you look at the solution, there's a lot of stuff here. Like I added a whole bunch of folders and stuff. So the first thing I did was is in the index.js there was a hello world component there, right? So what I did was I used the provider to provide the store and I wrapped the welcome component, which is gonna be this welcome screen here.
[00:00:31] I just call this the welcome screen. So that's gonna be my root for now until we get into navigation, which is next. So I just put that in the root and then I have these reducers, this thing called containers that we didn't talk about and then I have actions.
[00:00:46] So let's just look at the store right quick. So the store is literally just creating a store with a root reducer, nothing new, nothing fancy here. We have we talked about this a couple times that we didn't look at the root reducer. So I adopted a new pattern here where I have each reducer has its own file.
[00:01:04] Let's open all the reducers in one file and that's pretty much it. So that reduces I thought appropriate based on the designs were to have a reducer for UI and what I did in here was I noticed that there was a modal. If we look at the design, if we click Start Workout and you click this, this thing pops up right here, this is a modal.
[00:01:24] So I wanted the state of that modal to be inside a redux so that anywhere in my application I can open or close that modal. So whether that's the visibility of that modal, I put inside the UI state inside of Redux. So I made a UI reducer and then it has a property on it called exercise, I spelled it right, look at that, exerciseModal was default to false which means it's not open.
[00:01:49] And then if it gets an action called set exercise visibility, it just sets the visibility to whatever the payload is, true or false. And then later on in the application I'm gonna listen for this state and the modal, when that's true, it's gonna pop up and when it's false, it's gonna close.
[00:02:03] So anywhere in the app I can change a state and it's amazing. This is where Redux shines, whereas typically you would hard code this data like a component somewhere like this.modal.open and this.modal.close. And then if you want to use it somewhere else, you're like wait. How do I use this somewhere else now?
[00:02:18] So this is where Redux is keeping this state here. I can now do things and it's pretty cool. I could even fire off another action which will fire this action and have my own side effect chain if I wanted to. So I decided to do that there. I also have this exercises, something I told you I, I brought in the initial state that I supplied for you [INAUDIBLE] killing me.
[00:02:40] So the initial state that I supplied in initialState,js, I just brought it in here and set it to the initial state for exercises. So I brought it exercises as initState and just set it equal here, not doing anything with it. We're probably not going to modify the state for the exercises.
[00:02:54] Not today, you can do that if you want to continue working on this app. And then for current workout I created a reducer because we need to keep track of the current workout. And that's just going to be an array. So the actions that I created here were to fetch the current workout and add an exercise to the workout and you notice that I put this complete thing on it.
[00:03:15] We're gonna talk about that later and the reason I decided to put complete on these action types is because these are gonna be asynchronous actions. And usually asynchronous actions have two or three types. You'll have a type that's fired, an action that's dispatch when you start the asynchronous thing and then an action that's fetched when it's done.
[00:03:33] And possibly another action to fetch when it errors out, so that's an asynchronous action, we're going to get later. So I only want to change the state when the ansynchronous action is done. So I have a different type called workout complete and complete for action or for at exercise.
[00:03:52] And I'm not doing anything for the ones that start, but you could. For instance let's say you want to show a loading spinner when you call fetch current workout which will go to a server so you would somewhere like maybe UI which controls the loading spinner. You would have like loadingSpinner and that'll be set to false, but on case where, we would say fetch work out exercise, we would set loadingSspinner to true.
[00:04:17] But then, when loading exercise is complete, we set loadingSpinner to false so it'll stop right when the async action is done by itself. So, that's where you use something like that which is pretty cool. Any question on that so far and this is just my opinion on what I thought would be right.
[00:04:32] Like you could put all this in one reducer if you wanted to, this is how I decided to break it out and then an index is where I just combine them all. So I just made an index.js inside the reducers and I combine them all here.
>> Scott Moss: So if you've used Node before then you'll understand the pattern of the index.js.
[00:04:48] If you've never used Node before, putting an index.js inside of a folder, when you import or required from that folder by default it's gonna require the index.js file. So, I don't have to specify index.js. So, it's a great pattern to place all the modules for a certain folder inside of inside of index.js so when we import it like inside of store, I'm only importing the reducer's folder.
[00:05:13] I didn't have to say reducer/index.js, I just import reducers, which is going to import this folder which by default is gonna import the index js which is exporting this. So we're gonna use that pattern a lot using index.js inside of the folders. It's a Node thing, so I highly recommend it.
[00:05:29] Or I guess it's a common JS thing, not a Node thing. Any questions on that so far? No, all right. And then let's actually run this.
>> Scott Moss: [INAUDIBLE] have an alias.
>> Scott Moss: And all right, so while that's building, let's look at the other stuff I did here. So containers, I said it briefly earlier, but they're going to be types of component that we have.
[00:05:58] We're gonna have containers and we're gonna have UI components or representation or presentational components. Container components, you could think of as just components that are just like shells almost like our root component. It just has like the basic markup, minimum styling, and it's just a container for other UI components or other containers.
[00:06:18] Whereas a UI component or a presentational component is gonna be things like the input form that we made with a button and like all the other things that we make, pretty much everything, there's not a container things that are like you are related. So, I just have folders to separate those two different types of components.
[00:06:33] So again containers are probably things we're gonna be routing to, navigating to and are just containers, empty shells, and UI components are pretty much everything else. So it's a really good pattern in Redux is to have your containers have all the state and actions is passed them down to the UI components where the UI components just stateless and don't know anything just like the to-do form that we made.
[00:06:54] It just didn't know anything. We passed everything to it via props, that was a UI component. Whereas the to-do component itself was the container component where it knew everything. It had the state, it had the props, it had the actions and it just passed it to all own UI components.
[00:07:07] Yes?
>> Speaker 2: Are these containers also known as higher order components?
>> Scott Moss: No, a higher order component is actually when we use.
>> Speaker 2: Like provider.
>> Scott Moss: Almost, a higher order to part is like connect. So when we use connect and connect returns a new component, that's a higher order component.
[00:07:29] A higher order opponent is just a component that wraps another component, that's it, it's just a quick way to do a mix it. So like for instance if we wanted to add some functionality to this welcome component, we would make another component that would wrap this and do things inside of this component's life cycle hooks or something like that.
[00:07:50] That's a higher order component.
>> Scott Moss: Cool, so yeah, and then yeah, let's go run this very quick.
>> Scott Moss: Wrong app, I got like ten apps on here. There it is, so here's what mine looks like. It's just a white screen with a welcome screen. It looks exactly like the design.
[00:08:13] [LAUGH] Except everybody's like, it's just exactly like the design. So I got the button, Log your fitness, all that stuff. Yeah, and all I did here was, I mean I'll go through here, but it's just a whole bunch of views and text. It's really nothing, not the fancy in here.
[00:08:31] I just flexed it and changed everything blue. That's it, I didn't do anything else. There's no navigation. I don't even have Redux hooked up to this. I'm not using connect anywhere. So that was that was basically all I did. I just got the Redux thing started. I got our provider ready with the store ready.
[00:08:50] But I'm not even using it yet. And I just went ahead and just made this look kinda closer to the design but not quite there yet. And that's all I did.