1

00:00:00,660  -->  00:00:06,560
I'm really excited about this week's topic because it's one of the hidden gems of the redux world where

2

00:00:06,560  -->  00:00:11,850
you me talking about the library Resul act recently act as a support library for redux.

3

00:00:11,880  -->  00:00:17,610
So usually if you're using redux you might want to look into using resect Let's talk about what respect

4

00:00:17,610  -->  00:00:19,680
is and how it's going to help us out.

5

00:00:20,010  -->  00:00:25,380
Respect is use to compute derived or calculated state for redux projects.

6

00:00:25,500  -->  00:00:28,320
So that doesn't really make a lot of sense as a definition.

7

00:00:28,320  -->  00:00:32,670
This is one of those libraries where it makes a lot of sense to work through a little bit of example

8

00:00:32,670  -->  00:00:33,410
ahead of time.

9

00:00:33,420  -->  00:00:37,860
So let's talk about the example where you're working through and how redux or excuse me Reise life is

10

00:00:37,860  -->  00:00:39,600
going to help us out.

11

00:00:39,660  -->  00:00:43,960
So let's look at a diagram or mockup of the project that we're going to build.

12

00:00:44,100  -->  00:00:49,470
We're going to be building a small application where we fetch a list of posts from some third party

13

00:00:49,470  -->  00:00:50,070
API.

14

00:00:50,130  -->  00:00:54,880
And really it's just going to be a bunch of fake data to the left of each of these posts.

15

00:00:54,900  -->  00:00:58,810
We're going to have a little checkbox whenever a user clicks in the check box.

16

00:00:58,830  -->  00:01:04,980
It should consider this post to be selected and add it to a selected post list at the top of the application

17

00:01:05,370  -->  00:01:13,370
so you can see in this particular case I have selected a selected post and another selected post.

18

00:01:13,380  -->  00:01:16,080
And so I see both of those at the top of the page.

19

00:01:16,200  -->  00:01:18,370
All the rest of the posts are not selected.

20

00:01:18,390  -->  00:01:23,170
And so they're only on the all posts lists and they're not reflected on the selected post tab appear

21

00:01:23,200  -->  00:01:23,590
.

22

00:01:23,970  -->  00:01:25,730
So let's talk about a little bit.

23

00:01:25,740  -->  00:01:30,060
How might we approach this if we were using just react redux by themselves.

24

00:01:30,060  -->  00:01:33,550
How might we tackle this application here.

25

00:01:34,530  -->  00:01:40,880
So we might have a post redo her post reducers purpose would be to probably go and fetch those posts

26

00:01:40,880  -->  00:01:44,010
and kind of hold him in a big array or perhaps object.

27

00:01:44,010  -->  00:01:49,290
So we've got a big collection of posts inside of her post reducer in this diagram I've reflected six

28

00:01:49,290  -->  00:01:49,890
different posts.

29

00:01:49,890  -->  00:01:54,300
But in the actual application we're going to build we can have up to 100 or however many different posts

30

00:01:54,300  -->  00:01:55,820
we want to load.

31

00:01:55,830  -->  00:02:02,630
Now whenever a user clicks a checkbox next to post we're not going to modify the post model itself.

32

00:02:02,640  -->  00:02:08,370
Remember whenever we have some type of temporary UI state and certainly selecting a post is temporary

33

00:02:08,370  -->  00:02:14,110
you state we would not modify or underlying data structure or our underlying model.

34

00:02:14,160  -->  00:02:21,240
Instead we might create a selected post reducer the selected post reducer would hold an array of IDs

35

00:02:21,240  -->  00:02:23,260
for each selected post.

36

00:02:23,340  -->  00:02:28,240
So if we click the checkbox next to post 1 and post 5.

37

00:02:28,290  -->  00:02:34,520
I would expect my selected post reducer to have an array with the numbers 1 and 5 reflect reflecting

38

00:02:34,530  -->  00:02:37,890
post with ID 1 and posts with ID 5.

39

00:02:37,890  -->  00:02:42,960
So then when we decide hey I need to render a list of all the selected posts on the screen like it's

40

00:02:42,960  -->  00:02:50,170
time to show this data the data that we really care about which is contained inside the selected post

41

00:02:50,170  -->  00:02:53,930
reducer in the post reducer is a product of both Envy's.

42

00:02:53,970  -->  00:02:59,160
So we want some calculated piece of state we want to take two separate users or two separate pieces

43

00:02:59,160  -->  00:03:03,280
of state and calculate a new piece of state out of the two of these.

44

00:03:03,480  -->  00:03:07,600
So this is a classic use case for the select library.

45

00:03:07,600  -->  00:03:10,660
Respect is used for exactly this situation right here.

46

00:03:10,740  -->  00:03:17,550
Whenever we have one or more different pieces of state and we care about a value that is the product

47

00:03:17,640  -->  00:03:22,090
or Tukey related result of these different pieces of state.

48

00:03:22,500  -->  00:03:24,770
So let's take a look at how we might approach this problem.

49

00:03:24,780  -->  00:03:26,430
If we were not using slacked.

50

00:03:26,430  -->  00:03:28,820
So this is going to be a bad approach.

51

00:03:28,820  -->  00:03:30,790
This is something that we probably would not want to do.

52

00:03:30,810  -->  00:03:34,500
So let's say if we just want to kind of hack it together and get this thing working.

53

00:03:34,710  -->  00:03:39,540
We might have a post reducer we've got our selected poster douceur and then we'll make a selected post

54

00:03:39,540  -->  00:03:44,940
list component and inside the selected post this component will have some fancy logic for saying OK

55

00:03:44,940  -->  00:03:47,030
for each selected post.

56

00:03:47,040  -->  00:03:50,500
Let's figure out whether or not it's selected or what have you.

57

00:03:50,550  -->  00:03:56,490
So we've got some low dash logic in here where we all filter over the list of posts and then if each

58

00:03:56,490  -->  00:04:00,180
post is contained within the selected post ID's array then.

59

00:04:00,210  -->  00:04:03,120
OK let's keep it it must be a selected post.

60

00:04:03,120  -->  00:04:07,030
So this is definitely a solution but I would say it's a pretty bad approach.

61

00:04:07,050  -->  00:04:13,350
Number one it relies upon the selected posts list component to have some very explicit knowledge about

62

00:04:13,350  -->  00:04:19,620
the data structures of the post reducer and the selected post reducer as well so the selected post list

63

00:04:19,620  -->  00:04:22,920
component has a lot of knowledge of the application state.

64

00:04:23,190  -->  00:04:29,170
Secondly logic to figure out the currently selected posts list is not reusable in other locations.

65

00:04:29,190  -->  00:04:34,710
If we're putting this code inside of the post list component then we can easily reuse this in other

66

00:04:34,710  -->  00:04:35,900
places in our application.

67

00:04:35,910  -->  00:04:40,920
If it turns out hey maybe this other area in our application cares about the currently selected post

68

00:04:40,920  -->  00:04:42,120
list as well.

69

00:04:42,180  -->  00:04:44,690
So this is perhaps not the best approach.

70

00:04:45,520  -->  00:04:49,360
Let's take a look at how we would solve this using pre-select.

71

00:04:49,960  -->  00:04:53,160
So it is a very straightforward very simple diagram just to start.

72

00:04:53,170  -->  00:04:56,500
We're going to walk through a actual live coding example here in just a second.

73

00:04:56,500  -->  00:04:58,370
Bullets start right here.

74

00:04:58,480  -->  00:05:04,780
The idea behind Resul Act is that we create what are called selectors selectors will take in different

75

00:05:04,780  -->  00:05:09,740
pieces of state do some calculation and then spit out some data.

76

00:05:09,970  -->  00:05:16,780
So if we create a select selector to calculate our selected posts we'll take in the total big pool of

77

00:05:16,780  -->  00:05:23,020
posts the selected posts IDs and it will spit out the selected posts list which would presumably be

78

00:05:23,020  -->  00:05:28,790
just the post model with ID 1 and the post model with ID 5 right here.

79

00:05:29,260  -->  00:05:31,330
So this is the idea behind refl..

80

00:05:31,330  -->  00:05:36,640
Let's take another look at what this looks like in practice so very similar diagram here.

81

00:05:36,640  -->  00:05:42,280
But just to make sure it's really nice and clear We will take one or more pieces of read ex-state we

82

00:05:42,280  -->  00:05:48,250
pipe it into our selector and then outcomes are derived or calculated piece of state.

83

00:05:48,250  -->  00:05:53,110
So when you're working on your own projects if you ever feel like okay I've got this big list of data

84

00:05:53,110  -->  00:05:58,870
over here and I've got a big list of data over here and the data that really show is kind of the product

85

00:05:58,870  -->  00:06:00,460
of these two things.

86

00:06:00,490  -->  00:06:04,640
Perfect perfect use case for using respect.

87

00:06:05,220  -->  00:06:06,510
OK so enough diagrams.

88

00:06:06,520  -->  00:06:10,990
Let's walk through a very practical example in my browser.

89

00:06:10,990  -->  00:06:12,530
I've got a small.

90

00:06:12,550  -->  00:06:14,940
I get kind of half the application already written here.

91

00:06:15,100  -->  00:06:20,410
So you can see on my screen I've got a list of all posts and all posts currently have a checkbox next

92

00:06:20,410  -->  00:06:26,320
to them and I've already wired up some action creators and some reducers where if I select a post you

93

00:06:26,320  -->  00:06:27,830
can see down here at the bottom right.

94

00:06:27,850  -->  00:06:30,220
This is my redux Debb tools.

95

00:06:30,220  -->  00:06:35,590
I have my post piece of state and I've also got selected post ID's piece of state as well.

96

00:06:35,590  -->  00:06:41,830
And so I just checked the first post on here and now inside of my array of selected post IDs I have

97

00:06:41,830  -->  00:06:48,460
post with ID too which would presumably be this one right here and post with ID 1 which is the one with

98

00:06:48,460  -->  00:06:49,660
the very top as well.

99

00:06:49,660  -->  00:06:51,090
So let's do one more.

100

00:06:51,430  -->  00:06:58,420
And now we've got three items in selected post IDs and we have IDs to 1 and 3.

101

00:06:58,450  -->  00:06:59,330
Great.

102

00:06:59,830  -->  00:07:05,950
So our job here is to create a new component that's going to sit above the all pose component and it

103

00:07:05,950  -->  00:07:09,250
should display the currently selected posts.

104

00:07:09,250  -->  00:07:12,810
So the actual like kind of post text that it's on here right now.

105

00:07:12,880  -->  00:07:19,270
So let's give this a shot you know flip open my code editor and the first thing going to work on is

106

00:07:19,270  -->  00:07:22,100
going to be my selected post selector.

107

00:07:22,120  -->  00:07:27,970
So this is where we're going to really dump into to jump into the select stuff inside of my source directory

108

00:07:27,970  -->  00:07:28,030
.

109

00:07:28,030  -->  00:07:34,060
I'm going to make a new folder called selectors so I always like to keep all my selectors in one discrete

110

00:07:34,060  -->  00:07:39,400
directory so any future developers who come into my project know OK I've got all these nice utilities

111

00:07:39,400  -->  00:07:44,270
selectors I can make use of it if I so require inside of my selectors directory.

112

00:07:44,320  -->  00:07:46,150
I'm going to make selected posts.

113

00:07:46,170  -->  00:07:47,010
JS.

114

00:07:47,050  -->  00:08:00,940
So this is going to be my reset selector takes a list of posts and post IDs and picks out these selected

115

00:08:01,240  -->  00:08:06,460
posts.

116

00:08:06,460  -->  00:08:07,990
So let's get to it at the top.

117

00:08:07,990  -->  00:08:13,740
I'm going to import create selector from respect.

118

00:08:13,780  -->  00:08:16,710
So this is a method that we're going to use to create a selector.

119

00:08:16,780  -->  00:08:22,630
Remember a selector takes a piece of state one or more pieces of state and it ships out some new or

120

00:08:22,630  -->  00:08:28,160
derived calculated piece of state to create a Slichter.

121

00:08:28,180  -->  00:08:33,190
We are first going to create two functions to pick off the pieces of state we care about.

122

00:08:33,370  -->  00:08:42,880
So the first we're going to do is create select functions to pick off the pieces of state we care about

123

00:08:42,880  -->  00:08:44,450
.

124

00:08:44,560  -->  00:08:45,370
For this

125

00:08:48,280  -->  00:08:50,420
calculation.

126

00:08:51,030  -->  00:08:54,240
So I can make a post selector.

127

00:08:54,250  -->  00:08:58,860
This post selector they are going to create is going to be called with my global application state so

128

00:08:58,860  -->  00:09:05,130
I can use a fat or a function off of here and take off my list of posts so state up posts.

129

00:09:05,170  -->  00:09:09,670
I'm also going to get my selected posts selector.

130

00:09:09,940  -->  00:09:19,630
So from state to state DOT selected post IDs which are my the IDE the array of selected posts IDs.

131

00:09:19,630  -->  00:09:24,430
Now I'm going to create a function that's going to do the calculation between these two pieces of state

132

00:09:24,430  -->  00:09:24,630
here.

133

00:09:24,640  -->  00:09:30,430
So this is the part where you can stuff all of our complicated logic out logic and say Konst get posts

134

00:09:30,420  -->  00:09:30,820
.

135

00:09:31,060  -->  00:09:35,620
The first argument is going to be whatever comes out of the post selector function right here and we'll

136

00:09:35,620  -->  00:09:38,170
talk about exactly how this stuff all gets wired up in just a second.

137

00:09:38,170  -->  00:09:39,640
Just bear with me for a moment.

138

00:09:40,030  -->  00:09:43,590
So the first argument will be whatever comes out of this first function here.

139

00:09:43,630  -->  00:09:45,360
So be my list of posts.

140

00:09:45,580  -->  00:09:52,780
Then the second argument is going to be my list of selected post ID's so I'll take my selected post

141

00:09:52,840  -->  00:09:54,540
ID's.

142

00:09:55,540  -->  00:09:57,530
Now I can also make use of low dash

143

00:10:00,240  -->  00:10:02,870
to help with the actual calculation logic here.

144

00:10:03,070  -->  00:10:10,120
So my selected posts the actual post model the actual object that has the text the id the created that

145

00:10:10,360  -->  00:10:18,730
all that kind of good stuff to find by using filter going to filter over my list of posts and for each

146

00:10:18,730  -->  00:10:27,580
post I want to retain the post if it's contained within the selected post IDs.

147

00:10:28,140  -->  00:10:31,840
So for each post I have looked through the array of selected posts IDs.

148

00:10:32,110  -->  00:10:37,290
If the post ID is present in that selected post IDs array then I want to keep it around.

149

00:10:37,330  -->  00:10:39,750
That's what the filters can do for us here.

150

00:10:40,480  -->  00:10:44,810
Then finally I can return my selected posts.

151

00:10:45,120  -->  00:10:48,260
Ok so now here's how we can kind of wire this salt stuff all up together.

152

00:10:48,260  -->  00:10:51,100
Certainly these first two lines appear Definitely little bit confusing.

153

00:10:51,100  -->  00:10:58,780
Let's see how it all gets wired together at the bottom the export default create selector.

154

00:10:58,780  -->  00:11:02,290
My first argument is going to be post selector.

155

00:11:02,290  -->  00:11:05,380
Second is going to be selected post selector.

156

00:11:05,740  -->  00:11:08,060
And finally get posts.

157

00:11:08,410  -->  00:11:10,690
So here's our create selector works.

158

00:11:10,690  -->  00:11:15,190
We pass in some number of kind of state selecting functions.

159

00:11:15,190  -->  00:11:21,140
However many we want here we could have had several more if we so chose.

160

00:11:21,580  -->  00:11:28,630
Whenever our global redux state changes each of these preliminary functions are these preliminary selectors

161

00:11:28,630  -->  00:11:29,880
are going to be executed.

162

00:11:29,890  -->  00:11:31,280
So they're going to run again.

163

00:11:31,540  -->  00:11:36,390
Whatever value they produce is then going to be sent into the last function.

164

00:11:36,520  -->  00:11:40,050
The last function that's provided as an argument to create selector.

165

00:11:40,270  -->  00:11:44,860
So our last argument to create selector is always going to be the function that does some amount of

166

00:11:44,860  -->  00:11:45,980
logic for us.

167

00:11:46,000  -->  00:11:48,540
So let's mark this down as a comment.

168

00:11:48,790  -->  00:11:58,360
Last arguments is the function that has our select logic and then every other argument before it is

169

00:11:58,360  -->  00:12:02,120
going to be picked off a piece of state.

170

00:12:02,140  -->  00:12:04,650
Pick off a piece of state.

171

00:12:05,140  -->  00:12:11,710
So now whenever my global redux state changes whenever I've got a new selected post my pickoff functions

172

00:12:11,710  -->  00:12:13,700
are going to update they're going to run again.

173

00:12:14,050  -->  00:12:18,820
If they produce some new piece of state so if they've changed they're going to get sent to get posts

174

00:12:18,820  -->  00:12:19,500
again.

175

00:12:19,660  -->  00:12:20,770
Good post is going to run.

176

00:12:20,800  -->  00:12:26,710
It's going to find the currently selected PPOs and Boon there is my calculated or selected derived data

177

00:12:26,720  -->  00:12:27,170
.

178

00:12:27,610  -->  00:12:31,000
So now let's create a component to actually consume this list of data.

179

00:12:31,390  -->  00:12:40,190
I'm going to make a new component inside my components directory called selected PPOs list and inside

180

00:12:40,200  -->  00:12:42,160
if we're just going to use that selector.

181

00:12:42,160  -->  00:12:45,260
So we're going to make a small functional component.

182

00:12:45,280  -->  00:12:50,130
It's going to take this list of selected posts and then just render a single life for each of them.

183

00:12:50,140  -->  00:12:55,060
So let's set up some boilerplate import react and react.

184

00:12:55,100  -->  00:13:00,610
We'll definitely need to make access to relax state so bring in the factory docs and then I'm also going

185

00:13:00,610  -->  00:13:06,980
to import the selected selector which is what we just created.

186

00:13:07,750  -->  00:13:19,060
So I picked this from selectors selected posts call now selected post a list and this is going to be

187

00:13:19,060  -->  00:13:27,160
a functional component and I'm going to assume that inside of year my prop's is going to contain a property

188

00:13:27,520  -->  00:13:32,620
called post or posts excuse me and that post is going to be the array of selected posts that I care

189

00:13:32,620  -->  00:13:36,430
about that are being produced by the selected post selector.

190

00:13:36,430  -->  00:13:45,370
So now inside of the return statement of put down UL and will add some nice bootstrap classes just to

191

00:13:45,370  -->  00:13:47,050
make sure everything looks good.

192

00:13:47,170  -->  00:13:53,710
Then inside if you're going to do my math over my post array so this post right here is my selected

193

00:13:53,710  -->  00:13:54,070
post.

194

00:13:54,070  -->  00:13:57,150
That's what whatever is being produced by my selector.

195

00:13:57,550  -->  00:14:08,340
So for each post we're going to return and apply the class name of list group item.

196

00:14:08,830  -->  00:14:15,870
A key post on ID and post title.

197

00:14:15,900  -->  00:14:19,910
So post title Zawinul post text that we saw in the application earlier.

198

00:14:20,470  -->  00:14:25,780
So now we need to do the interesting part which is to wire up our selected post selector.

199

00:14:25,780  -->  00:14:28,080
So I'm going to define a map state to props

200

00:14:31,780  -->  00:14:32,810
and inside if here.

201

00:14:32,830  -->  00:14:39,880
Will return posts and now here is where we make use of our selected post selectors So we import at the

202

00:14:39,880  -->  00:14:40,520
top.

203

00:14:40,660  -->  00:14:42,120
Here's our selector.

204

00:14:42,460  -->  00:14:48,210
We're going to say selected posts selector and we're going to pass state to it.

205

00:14:48,230  -->  00:14:51,940
So remember state is an argument to our map state to prop's function.

206

00:14:51,940  -->  00:14:57,550
So we'd take our total global application state we pass it to the selector and the selector basically

207

00:14:57,550  -->  00:14:59,190
just takes it from there.

208

00:14:59,380  -->  00:15:07,240
Once selected post selector gets this new piece of state it's going to rerun the two functions that

209

00:15:07,240  -->  00:15:12,190
slice off small pieces of state and then it's going to rerun our Get post function right year to do

210

00:15:12,190  -->  00:15:17,890
the actual calculations so whatever gets returned from this calculation function right here is what's

211

00:15:17,890  -->  00:15:21,210
going to end up inside of posts.

212

00:15:21,280  -->  00:15:32,260
So now at the bottom will export default connect Matthysse to prop's with selected posts list which

213

00:15:32,260  -->  00:15:36,820
is the name of our component that we just created and actually selected post list.

214

00:15:36,820  -->  00:15:38,380
We want this to be now.

215

00:15:38,470  -->  00:15:43,140
I think we went with a plural all the way through so selected posts selected posts list.

216

00:15:43,210  -->  00:15:48,220
OK last step we need to make use of this component inside of our application going to flip over to the

217

00:15:48,220  -->  00:15:56,620
AB component which is currently showing our list our posts component and will import selected post lists

218

00:16:02,200  -->  00:16:11,800
and now inside of here I'll put on New-Age for say selected posts and I'm going to place my selected

219

00:16:12,010  -->  00:16:16,440
posts list component and open a chart between the two.

220

00:16:16,950  -->  00:16:18,440
So let's try this out in the browser now.

221

00:16:18,480  -->  00:16:19,710
In a flip back over.

222

00:16:20,080  -->  00:16:21,230
Let's refresh.

223

00:16:21,340  -->  00:16:23,020
Hopefully too many typos.

224

00:16:23,050  -->  00:16:25,390
I think we got a typo somewhere.

225

00:16:25,870  -->  00:16:30,170
I cannot find modular components selected posts list either I've got a typo

226

00:16:33,890  -->  00:16:35,130
and I think I do.

227

00:16:35,140  -->  00:16:38,110
I got one extra So my colon where it definitely should not have it.

228

00:16:38,110  -->  00:16:43,380
Let's take that out really quick as we go.

229

00:16:43,720  -->  00:16:44,910
Now we're back to good.

230

00:16:45,100  -->  00:16:47,650
Let's refresh.

231

00:16:47,650  -->  00:16:49,620
So we load up our list of posts.

232

00:16:49,960  -->  00:16:50,680
Here they are.

233

00:16:50,680  -->  00:16:56,010
And now I can select a single post and it gets added to my selected post pool so you can see that.

234

00:16:56,010  -->  00:17:00,490
Now I'm not requiring any extra data here I'm only recording the essentials.

235

00:17:00,490  -->  00:17:07,630
Just I've got my big ole list of posts the big post pool and I've got my selected post ID's so I'm not

236

00:17:07,630  -->  00:17:09,860
duplicating any post models.

237

00:17:09,880  -->  00:17:13,760
I've always got just a single post model throughout my entire application.

238

00:17:14,080  -->  00:17:20,170
If I want to select it I just add the ID and then my selector will automatically run some calculation

239

00:17:20,170  -->  00:17:26,740
on my list of posts and my selected post ID's and boom that shows up as my derived or calculated piece

240

00:17:26,740  -->  00:17:27,700
of state.

241

00:17:28,030  -->  00:17:33,430
So this is kind of a trivial example with re select but I'm absolutely positive as soon as you start

242

00:17:33,430  -->  00:17:38,770
working on any redux project you're going to start running into situations where you have two or more

243

00:17:38,770  -->  00:17:42,880
pieces of redux state and you want to execute some type of calculation on it.

244

00:17:43,150  -->  00:17:48,620
So whenever you're in that type of situation I encourage you to check out the result library.

245

00:17:49,420  -->  00:17:54,130
If you enjoy this videocassette I encourage you to check out Rallye coding dot com.

246

00:17:54,130  -->  00:17:59,650
We've got weekly videos on react and read X topics if you're interested in hearing about any different

247

00:17:59,650  -->  00:18:00,070
topic.

248

00:18:00,070  -->  00:18:04,930
You can always send me a message via YouTube Facebook Twitter whatever you want.

249

00:18:04,930  -->  00:18:07,870
Just let me know what you want to hear about Arcachon next week