React Native (feat. Redux) React Native (feat. Redux)

Exercise: Creating the Sweat Book Root Component

Check out a free preview of the full React Native (feat. Redux) course:
The "Exercise: Creating the Sweat Book Root Component" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will initialize the Sweat Book application. You’ll create the root component. You will also prep the Redux portion of the application with the necessary store, reducers, and actions.

Get Unlimited Access Now

Transcript from the "Exercise: Creating the Sweat Book Root Component" Lesson

[00:00:03]
>> Scott: As far as your task what you're going to be doing. If we look back is we start, we look at the designs. So pull open the designs and know what we know about redux and the components as far as breaking the components out. Look at those designs or start thinking about what components actions and state will need in the apps.

[00:00:22] And all you have to do for this exercise is just create the root component. So if you can, create one component that we can import both in iOS and Android. Even if you're not using both. Just one component and import it in both versus only in Android, only in iOS, or copying it, past into both places.

[00:00:37] Create like an app folder or something, and put it in there. And then Prep redux with the store, the reducers in the actions that you think we're gonna need for application. But I'm going to push this link in here for the starter app that I want you to use I have it.

[00:00:53] I just forgot the link to it. And that's gonna be as GitHub final master
>> Scott: Sweat book. So if you go the GitHub frontend master sweat book. That URL right there. And I'll post it in the chat too. If you grab that and you check out the, there's a branch, don't start working on master.

[00:01:25] I think masters actually all the solutions for the stuff but if you check outs, was that?
>> Scott: Yep. So if you check out to the bootstrap branch. That's exactly where you need to be. There's gonna be a file in there. Let's just look at it. Check out. Bootstrap.

[00:01:54] Yeah. So check out the bootsrap branch.
>> Scott: Not, this but this app. There's gonna be a file in there you're gonna look at and I left that follows that's gonna be the initial state for some of the reducers. And if you remember I kind of showed you how to set up some initial state.

[00:02:12] There's another way to set up initial states with reducers we're not going to use that way. So if you look at this file and the source, there's an index dot js that just says hello and change me. And then there's some initial state, so like some initial exercises and categories of those exercises that we're gonna use and that's basically about it.

[00:02:32] And there's a dv dot.jason that we will use later for the server, what I use right now. The goal is remember, there's already really like a rook component here. So you can fix it up ever you want and when we need to go and initialize redux. So however much you have a little you think that is so you might thinkg like well where do I really start with that again if you look at the designs.

[00:02:53] We can kind of think about. What our app is gonna need. So again I know that we gonna be keeping track of this current workout. That's like probably an array of exercises or something like that right. So that might be something you wanna keep track of and redux.

[00:03:08] If you could this plus buttongand you see that we're searching for exercises that we're tapping out so. That means really only we're keeping track of right now is this thing called current workout which is just like an array of exercises and if you look at initial state. I have exercises already here.

[00:03:27] So the few ways you can do this you can load up the exercises and the categories into redux as like initial states for those properties which is what I did. Or you can just like bring these into your file. However, you want to do it our bodies in a redux.

[00:03:40] Remember the way you can load up an initial state in redux as if you do [SOUND]. Or one of the ways you know a lot of initial state redux is inside the reducer. If you go to look at the reducer remember here I said state equals an object.

[00:04:05] That's the natural state for this is a blank object but I can say you know whatever I want here for the natural state for this so grab in that initial state file that's in the report that I just gave you. You could make a new reducer for exercises, new reducer for categories, and it's initial state are those objects or that array.

[00:04:22]
>> Speaker 2: Where is the best place to put in like, you know, how you Ajax the JSON server.
>> Scott: The best place to put Ajax?
>> Speaker 2: Well I'm saying like if you are calling from the server and this initial state.
>> Scott: We're gonna get to do that That's a whole another story.

[00:04:39] That's a sync action creators. That's all another thing. We're going to get to that today for sure.
>> Speaker 2: Okay.
>> Scott: So you put that stuff her. The other way to do initial state in Redux is if you go to the actual store you can pass in a second argument here which would be your initial state.

[00:04:58] As it's an object that looks exactly like the object that you passed. It looks exactly like this object here. So in our case, in the to do app, it's like a todo todos and then there's like a user. So our initial state could be that. We can also do a like that too.