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

Creating a Modal Solution Part 1

Check out a free preview of the full React Native (feat. Redux) course:
The "Creating a Modal Solution Part 1" 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:

Scott begins walking through the solution to the Creating a Modal exercise. He has created state properties for both the currentWorkout and the exerciseModal. The currentWorkout property will access the state for the current workout. The exerciseModal property is used to determine the modal’s visibility.

Get Unlimited Access Now

Transcript from the "Creating a Modal Solution Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott: Anybody launched the Modal? No, nobody got to the Modal?
>> Speaker 2: My screen looks like this. [CROSSTALK]. I got that Modal. Some, what was happening. The vector icon library was trying to override itself because I guess when you run RNPM Link.
>> Scott: Link.
>> Speaker 2: it just keeps adding imports to the main activity dot Java.

[00:00:43]
>> Scott: Did you run that while the app is running?
>> Speaker 2: Did I? Maybe.
>> Scott: That's probably why. Just stop it and then do that part for go. Alright, so let's go through here. That's not been my life broken too but will fix it along the way. So this is why I did.

[00:01:01] The first thing I did was actually move current work out of the container because I started work on Mars like this actually makes more sense to be a container and now you are component. So I did that because it is a container. So take a look there. It's kind of beef you know.

[00:01:14] So we need to connect this to redux. So we could open up. The modal and then we also needed to add like a little area some little component thing to that's kind of like display our list and then also allow us to open up the modal Yeah. So a few things here.

[00:01:33] So the first thing I did was I import a connects To connect to redux here on the side of this component and then, actually we don't need that. We don't need both of those so then what I did was I created a new action called setExercise. Modal visibility and were gonna look at it in minutes.

[00:01:57] It sounds fancy but is not really doing anything. Actually This is now we gonna know. So this is all it's doing. I think this is already here. I think we went over this. It just takes it it's visible not true or false it just recreates it action And returns that action.

[00:02:16] This is going to be an object with a type of this and a payload of whatever boolean this is. It's just toggling a boolean. And then I'm getting the states states of props in the state that I want for this screen is going to be the current workout which is going to be an array because eventually we're going to put Current work out on the current work out component.

[00:02:36] So we need the current work out state and then also need to exercise modal state so. So, the Modal be open. Yes or no. So, those are the two things that I need here for now. And then, for the props, so, the actions that I need is that only one for Nonis to set the Modal visibility, just what I decided to call it, you can name this whatever you want.

[00:02:53] I just called it that. that takes in a billion. That is going to dispatch that action created we just saw. So this is going to dispatch this function which takes of a billion which returns in actions is going to spend action and then actually if you look at the reducer inside the current workout reducer or.

[00:03:13] I'm sorry, in the UI reducer, it's gonna hit right here. This is going to toggle this exercise Modal to be true or false. And because we're subscribing to the exercise Modal right here, we have it. So, now we just gonna bind this straight to the Modal. So then I covered this over to a class, set up some default props here.

[00:03:36] Current workout, we actually don't need exercises right now. And the render function we have the top bar like we've always like we have before. We had that over that and then here I actually broke out to a few other components. So the first component I made was work out list.

[00:03:52] And we'll go, look at that, and then, I made one for exercise Modal. So, I made those two separate opposers they have their own logic. I just don't wanna stuff it in here. So I broke those out to 2 separate departments. Workout lists is going to be this right here.

[00:04:06] So right now it's not really a list because we don't have a workout but if you give it some workout it will render a list. That's not at all render as an exercises for the plus but, that's why I call a workout list. And then, exercise Modal is that, a Modal like there.

[00:04:21] So, let's look at some of that stuff. Any question so far and like why I decided to do some of the things I did or if you lost anything.
>> Scott: Does this make a sense, why did this. Well that was, let's not make a sense? I still don't have my head wrapped around Redux, but that's okay [LAUGH].

[00:04:44] Okay, just think about it like this. [CROSSTALK]
>> Speaker 3: No it's it's really okay.
>> Scott: Yeah, you've got to think about it like this. So we have a single state tree, right? We have a store. That's just one store in our entire application this function is saying hey this component wants access to this state on that store that sort of saying.

[00:05:10] I want to get the current work out state and I wanna get the state.exercise Modal state. And I want to merge it on a property called current workout and a property caught exercise Modal. On to the props of this component. So now we have prop dot current work out props dot excise moto which are always going to equal the new value of these state properties here, and then for the actions we're literally saying the same thing I want to make an action that dispatches or I want to make a property that dispatches an action.

[00:05:42] That's it. Yes.
>> Speaker 4: So I'm Charles. in general are usually using dispatch in your map actions to props functions or will you use that tool to bind dispatch to your action creators?
>> Scott: Yeah. So there's a tool you can use bind an action creators which does it for you but I wanted to be explicit about what's happening.

[00:06:00] So I'm not high in the magic. So you can use there's another tool And like reactor, where is it or react to react has an bind action creators which will pretty much just take all the actions that you want and so you don't have to do this. It'll just do this part for you are pretty much.

[00:06:21] I'm just writing it all out so we can see it. I don't want to hide the magic because yeah, you can do that as an abstraction but it's nice to understand what's happening before you do the abstraction. Typically I always just write it out like this anyway so I can just look at the file like yo what's going on.

[00:06:36] That's just me. Sweet so yeah that's that's redux it's just like merging the props it's like give me this state give these actions attach it to the problem and the reason we do that is because this state is going to change, And when the state changes it's going to update the prop which is going to rerender the method here rerender the component.

[00:06:57] So that means the component is always going to fresh state. Whenever an action is fired. That's pretty much what's happening. So any other questions on that?
>> Scott: No? All right, let's hop into this WorkoutList. So the WorkoutList has two props on it, setModalVisibility, and that's just going to be a boolean.

[00:07:18] And that's bound to this.props.setModalVisibility. Which is also bound to this method right here which is going to dispatch so that's a function so now the Modal can determine if it wants to close itself or not that's why I passed out it so if you go look at the designs.

[00:07:37] There's an X on the modal. So that's what that function will be called when you click the X is to control the visibility of the motile so if you click the x it closes. Also if you click a workout it'll close but add the workout too. So that's what that function is to control the visibility of itself and then the current workout.

[00:07:55] So this is going to be the array of the current workout and the reason we put this here. it is because or actually no wait.
>> Speaker 4: Is that the modal?
>> Scott: Yeah this is not the modal I put this on the wrong property sorry. I'm like wait that doesn't make any sense.

[00:08:10] No wait actually no we do want this here we do want this here too. We definitely want this here. The reason we want this here is because when we click this pause button, this pause button is gonna launch the Modal. So we put that there. But we also want to put that on the modal itself too.

[00:08:24] But the modal only closes so only put closeModal on that. The modal can't open itself if it's already open. So it only can close itself so I put that there. Yes so the WorkoutList definitely wants to be able to open it or close it or whatever. And then the currentWorkout which is going to be a list of workouts And there is no workouts in that list, just render this.