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

Mapping Actions to Properties

Check out a free preview of the full React Native (feat. Redux) course:
The "Mapping Actions to Properties" 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:

The last step is to map the actions to their corresponding properties. Scott creates an ADD_POSTS action and uses the dispatch object to trigger that action and send they action’s payload.

Get Unlimited Access Now

Transcript from the "Mapping Actions to Properties" Lesson

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

[00:00:03]
>> Scott: So we head over to the Reddit stuff right here. What we can do is, where we're passing this null here, you can pass in another function that will map actions to the properties that we can call, so let's do that. So we'll say, const map.
>> Scott: Action to props, and we'll do that.

[00:00:27] And what we'll do is we'll get access to this thing called dispatch, which is how we can dispatch actions. And we just need to return an object here, and we'll create an action called add,
>> Scott: Reddit. addRedditPost. And what that's going to do is it's going to be a function that takes in a post.

[00:00:52] And all it's going to do is dispatch an action, we'll just write the action in line right here. So the type, we need to give it a type. So if we go over to our reducers. We'll just make another one called const ADD_POST. And we'll say ADD_POST. So we'll have that.

[00:01:13] And we'll export it. We'll import that type. All it is is a constant. So you wanna keep those constants the same. Otherwise you'll run into some stuff like why is that not reducing? Or something like that. So ADD_POST. Oops, not from ADD_POST. [LAUGH] From reducers. There we go.

[00:01:39] So ADD_POST from reducers, and now the type is ADD_POST.
>> Scott: There we go. And then the payload is going to be the POST that we sent in. So we'll say post. In this case, we'll just go ahead and hard code one, because we have a stateless component. I don't wanna change it to do that.

[00:02:00] So we'll just hard code this POST to be, we'll just set a default one right here, like name: 'new post'. That's what we'll do, cool. So we'll do that. So the payload is Post, dispatch in that.
>> Speaker 2: You have a typo.
>> Scott: Where at?
>> Speaker 2: AddRedditPost.
>> Scott: Thank you.

[00:02:18] So now we have, on this props in this view right here, we also have props.addRedditPost, which is going to dispatch this action called ADD_POST, with the payload of an object with a name on it, right? So now what we gotta do is inside of our reducers, is listen for this action to happen, so ADD_POST.

[00:02:40] Let's get rid of this stuff. We'll listen for that action to happen, and we'll say when that action happens it's going to be a new post. We just want to go ahead update our state with a new post. So what we do is we'll say, all right, now just return a new array with the state in it.

[00:03:01] The old state that's already in it, plus the new post which is payload., I'm sorry, action.payload. You see that? This is almost like what we did with the todos, where we created a new array before we did set state. It's the same thing, as if I'm grabbing the original state, actually I should just put this at the top, and doing that.

[00:03:23] And then we need a default. Cool, so that's the ADD_POST.
>> Speaker 3: [INAUDIBLE] comma [INAUDIBLE].
>> Scott: Comma, there we go, there we go. Thank you. Sweet, so now we head back over here. This is being dispatched. All we have to do is just like add a button that does that.

[00:03:45] Touchable opacity.
>> Scott: And we'll say add, or text. Add.
>> Scott: And onPress, It's just going to say props.addRedditPost. And we're not gonna pass anything in, cuz the default's that one that we had. So there we go. We'll just do that, and then we'll refresh this.
>> Scott: Reducers three, looks like I got an error.

[00:04:31] Yeah I guess I need that.
>> Scott: There we go. All right, so now we have this button Add. If we click it, looks like we had something go wrong. Now let's just do a debugger here and see.
>> Scott: So if we come in here into our reducer, you can see what's happening here.

[00:05:13] Let's just reduce, or I said reduce. Let's just break,
>> Scott: Up here. Not here, but here. Cool, there we go. So we'll break there.
>> Scott: Okay, you're fine, there we go. Now we'll just refresh this.
>> Scott: There we go, and then we'll click this again, and we'll see if it broke.

[00:05:45]
>> Scott: Nope, so it didn't get here, and, I think I know I why. It's because we forgot to add it to down here. So we got to get rid of this null and say, map actions to props. There we go. Now if we refresh and we say add, it looks like it broke this time.

[00:06:11] Yeah, so great thing I have this debugger. So look, when I clicked Add, it fired off that action. The action came right into this reducer, and hit the case of ADD_POST. And that's because if we go look at that action, it's just a payload and type. It's the exact same thing that we fired off,

[00:06:32]
>> Scott: Here, the payload and the type. That's the action that came in. And then we have that reducer that does a switch statement on the type. And when it sees it, it's just gonna grab this payload and add it to the state. And it's going to send it back down, and then that state, which we're subscribing to here is going to be updated, which causes this to re-render, with the new state.

[00:06:55] Whenever the props change, or whenever we call this.set state in React, it re-renders. And the props changed here. So now if we just hit play, we should see the other one. Okay, I think I got to get rid of that pause, it's killing us. Go. There we go.

[00:07:16] All right. Now let's refresh this. There we go, it added it, but for some reason we can't see it. It's like there. I saw it bump down.
>> Scott: I don't know where it went, but it added it there somewhere. Anyway, it's still adding it, like invisible somewhere. Don't like debugging that though, that will take all day.

[00:07:49] All right, any questions on a Redux? This is your time. We just went through a lot of Redux. And I was trying to skip a lot of stuff because we're actually going to more advanced stuff tomorrow, where I get more in depth on it. This is just more like, hey this is the intro to Redux.

[00:08:07] We are actually really going to get really hard into it tomorrow.