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

Using Redux with Synchronous Actions

Check out a free preview of the full React Native (feat. Redux) course:
The "Using Redux with Synchronous Actions" 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 order to simplify this example, Scott modifies the Reddit application to use synchronous data rather than the asynchronous Fetch API. He then maps the properties from the application to the desired state from Redux.

Get Unlimited Access Now

Transcript from the "Using Redux with Synchronous Actions" Lesson

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

[00:00:03]
>> Scott Moss: So actually I do a few more things there, mainly because our actions are asynchronous. Actually, I think we're gonna have a serious actions tomorrow. This is too complicated. So we're gonna get into this asynchronous actions as we will be doing if it will do instead is. We'll just do a quick example of like redux of data state on Reddit here.

[00:00:24] So what we'll do is, first thing is, I'll go ahead and make Reddit actually a lot more simpler, and not doing like async stuff now. It was make it super simple, and it's really just going to
>> Scott Moss: Get a view here, and it's just going to render this dot

[00:00:50]
>> Scott Moss: Props.items. So we haven't talked about items yet, because we hadn't made anything, but I was gonna render that. And this just going to say, item here.
>> Scott Moss: All right, let's start prop stuff post, there we go.
>> Scott Moss: And all it's gonna do is to create a text,

[00:01:18]
>> Scott Moss: With a posts.name. That's it, that's all this is gonna do. It doesn't need a state, it doesn't even need a constructor. And in fact, it doesn't even need to be this.
>> Scott Moss: Just this now.
>> Scott Moss: That's it, it's just a view. It's what we call a dumb component.

[00:01:51] It doesn't know anything, it just takes some props which are gonna be passed in here, and it's got a return view. So now we have props, that's it. So these props are to be passed in. So now we can take this Reddit thing here, and we can bring it into our Todo.

[00:02:12] And we'll just say, imports Reddit from,
>> Scott Moss: Reddit,
>> Scott Moss: And now we can go ahead and throw this Reddit thing here somewhere. Let's just throw it, let's get rid of this Switch, I wrote the Reddit here.
>> Scott Moss: There we go. Ctrl+E,
>> Scott Moss: There we go. So now, we have this Reddit thing, and then now for the actual props that we want to pass.

[00:02:48] We get them from redux, so we head back over to Reddit. We have this connecting right here. So connect is going to allow us to connect to the redux store and get the stuff that we want. So it's really just a higher order component, so we're just gonna go ahead and wrap this Reddit thing.

[00:03:02] So I was gonna call this like, let's just call this, we'll call this, I'll just call it Reddit. And what we're really gonna export is this, export this new Reddit not underscore, equals connect. So connect is gonna take some other stuff we're gonna talk about in a minute.

[00:03:27] We're gonna pass in Reddit here. So what we wanna do is we want to tell connect what state that we want. So we'll make a function called mapStateToOrops. And this is literally gonna map the state from redux to the properties of this Reddit component. And it's just gonna be a function that returns an objects, and a function gets access to the state here like that.

[00:03:55] So now we have the state, and all we can do is we can say the state that we want in this case is the posts. So we'll say, post and it's gonna be state.post. Actually, it's actually called state.reddit. It's a lot of follow, I know. It's [LAUGH] yeah, this is why I wanted do RXJS, but we have to set this up like this.

[00:04:27] This is all the set up for redux. It's a lot, but now what we do is we pass in mapStateToProps. And we pass in null, cuz we don't want any actions right now. And now all the properties I'm sorry, now that when this state changes, it's gonna create a property caught posts on this component, which we are expecting props.post.

[00:04:55] So this prompts.post is this post, which is the Reddit state that's in the store. That's gonna change whenever an action is fired.
>> Speaker 2: You got a typo in connect.
>> Scott Moss: Connect, connect, connect, connect, thank you. Sweet, so all that's good to go. So now, what we'll do well just go ahead and populate the store with some default stuff.

[00:05:19] So we had over to the reducer, we'll put in some default stuff in here. Like name, demo, name, hello, so we have that, that's good to go. We got the provider, we got the store, the reducer, let's refresh this, wrong button. Cool, looks I got error on Reddit JS 16 right here.

[00:05:57]
>> Scott Moss: Yeah, export const. There we go.
>> Scott Moss: Expected reducer to be a function. I must have messed up.
>> Scott Moss: Yeah, this should be reducer.
>> Scott Moss: Const will say, imports. The other import distinct redux got combine reducers redux.
>> Scott Moss: Redux, there we go. So we'll combined reducers export const.

[00:06:53] Combine reducers, that takes an object and we've got to Reddit here. And I was make a new one called like data that's like nothing. There we go, there we go. All right, so we got that. And now all we have to do is refresh this, and see what else.

[00:07:30]
>> Scott Moss: Okay, it's like caught them, was broken loose, when I restart this thing now.
>> Scott Moss: Should be export const reducer = combineReducers. So let that build again,
>> Scott Moss: A lot of moving pieces here. While we wait for this to build, questions on redux. You know why we even need in the first place and why the hell, why do you need it and why you can ask that the reason that it?

[00:08:28] Well go ahead.
>> Speaker 2: Define our x, I feel like redux is kind of heavy. There's just so many places if that there's so many places that you have to update.
>> Scott Moss: There's too much boilerplate for me, right?
>> Speaker 2: Yeah.
>> Scott Moss: I like the result this is a lot of boilerplate, you saw.

[00:08:42] We only have 1 reducer, I have 30 reducers, it's ridiculous. But yeah, I mean.
>> Speaker 2: Also it's kind of like you kind of just search around for what's consuming what?
>> Scott Moss: Right, yeah.
>> Speaker 2: Reducers could be all over the place listening to one endpoint
>> Scott Moss: Yeah.
>> Speaker 2: And action.

[00:09:05]
>> Scott Moss: I always mess up on typos with the action types. So then I gotta go back and change a bit. Yes?
>> Speaker 3: Careful, things in there. Charles M, has a comment on why we use it.
>> Scott Moss: This kind of like event emitters. No, not really, no they're not really, so much as event emitters.

[00:09:23] It's more like a single store, so you have a single store and you're not really emitting events, you're actually subscribing to one state changes. Instead of admitting any event and like hey, I just wanna do this when this event is admitted. It has really not a lot, I mean there are events in the Redux system.

[00:09:44] But you, as a consumer of the Redux API, you're not actually tying into those events. You're just saying, hey, when a state changes just rerender yourself and that's it. But you could do the same thing with event emitters like Angular 2 does, with event emitters and RxJS. Does the reducer name need to match the state?

[00:10:08] Yes, the reducer name needs to match whatever you combine, where is at? Yes, it needs some, wait where, there we go. It needs to match whatever you put into combine reducer. So now I have a state card Reddit and then if I made another one, let's make another one real quick.

[00:10:35] Let's just say, const data, this one also has to stays the same thing. It was a state is an object and an action, and I'm not gonna say that right now. All we do is we'll just say, return state. So now that we have two reducers, what we would do, oops, wrong syntax.

[00:11:01] Now we have two reduces, what we would do is, if I come down here and put comma data. Now there's gonna be a state tree inside the redux store that has Reddit property and then data property. And they're both gonna be name space of these two reduces right here.

[00:11:19] The data reducer and a Reddit reducer.
>> Scott Moss: Cool, okay, I think that was only two.
>> Speaker 2: To define Rx to be like lighter weight.
>> Scott Moss: Yeah, Rx is definitely lighter weight, and you can do all this in like five lines of code, it's like one.
>> Speaker 4: The first code, but the libraries office weighed more, right?

[00:11:40]
>> Scott Moss: Yeah, the library itself is huge.
>> Speaker 2: [LAUGH]
>> Speaker 4: Redux is like a 100 line and Rx is like 1,000s of lines.
>> Scott Moss: Yeah, that's also true.
>> Speaker 2: Do you ever played with cursors?
>> Scott Moss: No, I haven't. I never play with that, I've got a chance, I heard crazy things about it though.

[00:12:00] Yes, so where were we? Yes, so we've got that, next thing we need to do is we've got the story. Let's run this, looks like my simulator ran, but didn't run as I tried to start it while I was running. So I got it start it again, it's really annoying.

[00:12:17] Man this is eating up into the time. I might be wanna get to the thing that I really want to get it today.
>> Scott Moss: Okay, this is building again, this is sometimes this happens. It just crashed, and you got to start emulator up again, but I promise this is actually fast compared to what it used to be a couple months ago, it was horrible.

[00:12:42] Not react native, but just like emulator stories in general, great. So now we can run this again,
>> Scott Moss: Let that build, now let's double check our stuff here. Let's head over to our Todo, we have the Reddit thing in here, or here at the top. And insdie our Reddit, it's just subscribing to it's own stuff, like this posters here.

[00:13:07] Cool, all right, so it didn't break this time. Looks good, some promise stuff going on, that's fine. The Reddit stuff, so the Reddit stuff is rendering those names in our store right now, right? Cuz we look, we're saying, props.postop.map Text post.name. If you're gonna look in reducer, there they are, demo and hello.

[00:13:28] It's going ahead and it's doing that. So now, if I create an action that adds to that, you'll see that it all updated. So let's create an action that does that.