Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Refactor Redux for Flow" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian starts to integrate Flux into Redux by adding an ActionTypes, which are types that can only be that string. Brian sets an SET_SEARCH_TERM to an ActionType.

Get Unlimited Access Now

Transcript from the "Refactor Redux for Flow" Lesson

[00:00:00]
>> Brian Holt: So kinda to recap where we were, we've now integrated Redux into our application, it now works. So if I type black right there, and I go into Black Mirror and then I come back out of it, notice that black is still up there. That's because Redux is keeping that state.

[00:00:21]
>> Brian Holt: And, yeah, so we were able to do that. It's not fun to refactor to include Redux, cuz it involves touching a lot of pieces of your code, and those sorts of refactors are the worst. There's lots of potential for breakage, but now that it's in there it's actually pretty convenient to keep using it and to keep dispatching actions via the reducers and all that kind of stuff.

[00:00:43] So something that we have not done yet is we have not integrated flow into Redux yet and I did this on purpose because you can do Redux, again, without flow. I wanted to show you how to do that, but now that you've seen how to do Redux without flow, I wanna go back and refactor to include flow and luckily, because of the patterns that we followed, it's not gonna be terribly difficult.

[00:01:05] So the first thing I want you to do is we're gonna open our type's file. This is inside of your flow type directory. We'll gonna add three new types in here. For the most part of easy like already rely on the part with it. If you notice inside your MPM Directory here, down here you're gonna have some Redux types down here already included, but what we're gonna do now is we're going to go type our actions.

[00:01:41] And [COUGH] I admit that I totally lifted this from the Facebook F8 app, that's kind of like the best example app for how to use Flow with various different components. So definitely one I would suggest checking out. It was their open source app that they wrote for their F8 conference.

[00:02:04] So the first thing we're gonna do is we're going to declare all of the potential action types that we could, that we can have. So the first one we'll gonna say is declare type ActionType = 'SET_SEARCH_TERM'. This is what we'll call in enumerated type, which, if you've worked in various other program languages, you will usually see here and there.

[00:02:33] This is just saying, I have this action type, and for this particular case our action type can literally only be this string. If it's literally anything else, you're gonna get a type checker error. However, as we add more action types, we're just gonna keep adding them there, and so an action type can be one of these strings, right?

[00:02:48] So for this particular one it's set search term. So the second thing that we're gonna have, is we're going to have an action type that's gonna be generic. So we're gonna say declare type ActionT, and this is gonna take in an A, which is gonna be an ActionType.

[00:03:11] That's gonna take in a P, which is going to be some sort of payload. So we're just using A and P to B generic types, right? I'll show you how to use this momentarily. So the first thing is gonna have the type, right, cuz every action has a type.

[00:03:29] It's gonna be A and it's gonna have the payload, which is gonna be P.
>> Brian Holt: Okay.
>> Brian Holt: There we go. So these two types are purely for internal use inside of this type file. The one that we're actually going to export out into the world is called Action.

[00:03:59] So we're going to export Type Action = ActionT<'SET_SEARCH_TERM', string. Type Action = ActtionT<'SET_SEARCH_TERM, string.
>> Brian Holt: So we have action type, this is always going to be a string, in this case, it's always gonna be the set search term string, right? We have this kind of generic action type that's gonna take in, as you can see here, it takes in this parameter and this parameter.

[00:04:39] So it takes in an action type and it takes in a payload type of some sort, right? Cuz your payloads can vary from action to action, right? We're actually gonna write one here momentarily, that it's gonna be an object, right? But for this particular one, it's just gonna be a generic P, right?

[00:04:55] And the payload's going to be that, right? So for every time that we have a SET_SEARCH_TERM action, it's type is going to be string for the payload, right? Does that make sense?
>> Brian Holt: Sort of?
>> Speaker 2: Could you explain that syntax?
>> Brian Holt: The angle brackets?
>> Speaker 2: Yeah.
>> Brian Holt: Sure, so when you do these angle brackets, this is like parameters that you're giving to that particular item.

[00:05:22] So for examplem you've done this earlier where we had an array of show, right? So we're handing another type to this type. So, in particular for this array of show, it's going to go validate that everything inside of it is a show, right? For ours here that we're doing we're gonna validate that the first item is going to be the type of the action.

[00:05:45] And the second type, the P, is going to be whatever the type of the payload is. So the payload for SET_SEARCH_TERMS is always going to be a string. So if I try and create a SET_SEARCH_TERM action that's a number, it's gonna fail my type checker, which is exactly what I want it to do.

[00:06:01]
>> Speaker 2: For sure, I guess I was curious is that an ES 6 [CROSSTALK].
>> Brian Holt: This is a flow, purely flow stuff, yeah.
>> Speaker 2: Okay, gotcha.
>> Brian Holt: Good question.
>> Brian Holt: And then what I'll do here for action, right now, the only action that I have in this application is this set search term action.

[00:06:23] But as we come and add more actions, what we're gonna say is this can be this kind of action or it can be this kind of action, right? We'll create each different kind of action that we can have. Which will be great because flow will actually be the one that's like hey, you're dispatched in this action and that's not a valid action, right?

[00:06:40] That's gonna save you a ton of bugs that way, but that you're not gonna be dispatching wrong sorts of actions.
>> Brian Holt: So this will get us started, and as we go do the next actions, when we get to the asynchronous actions, we'll go write another action types. You can see what it looks like when there are multiple different types of actions.

[00:07:01] Okay, so, now we have to go opt in all of our files to flow. So open reducers,
>> Brian Holt: And say at flow. Open store, add at flow, open action creators. By the way, you will still be getting this lint error, we'll be fixing that here in just a little bit, but if you're still seeing ESLint errors, that's expected.

[00:07:38]
>> Brian Holt: Save action creators.
>> Brian Holt: And then lastly we have actions, and we'll need to go opt that one into Flow as well.