1
00:00:00,570 --> 00:00:05,410
In the last video we connected our language selector component to our language context.

2
00:00:05,570 --> 00:00:10,550
We were able to pull some information out of our context which included the ability to change the currently

3
00:00:10,550 --> 00:00:12,110
selected language.

4
00:00:12,110 --> 00:00:15,890
So now that the language selector is all fixed up I'm going to close it.

5
00:00:15,950 --> 00:00:22,580
The next thing we're going to do is open up our field component so we need to make sure that that field

6
00:00:22,580 --> 00:00:27,060
component is going to reach into the context and pull out the language.

7
00:00:27,080 --> 00:00:30,940
So inside my code editor I'll find the field component right here.

8
00:00:30,950 --> 00:00:34,430
Now you'll recall that this thing was already hooked up to our language context.

9
00:00:34,520 --> 00:00:36,630
So you might think that there is no change required.

10
00:00:36,830 --> 00:00:39,590
But in fact there is a tiny little change we need to make here.

11
00:00:39,860 --> 00:00:45,620
Remember that previously we had wired up our context object to just contain a string of either English

12
00:00:45,650 --> 00:00:46,560
or Dutch.

13
00:00:46,820 --> 00:00:52,220
But now our context is actually an object that has both a language property and an on language change

14
00:00:52,220 --> 00:00:53,200
property.

15
00:00:53,240 --> 00:00:58,380
So in order to get our field to work correctly we need to make sure that we tried to access this doc

16
00:00:58,450 --> 00:01:05,090
context language because again our context now contains an object with a language in on language change

17
00:01:05,090 --> 00:01:10,510
property not just the string that it was before it's now all save the field file.

18
00:01:10,840 --> 00:01:15,640
And if I flip back over to my application I should be able to click on the two flags right here and

19
00:01:15,640 --> 00:01:19,130
you'll see that the field is correctly changing.

20
00:01:19,180 --> 00:01:24,990
All right so now we need to do basically the same thing for the button as well inside of my button.

21
00:01:25,070 --> 00:01:30,710
Yes file we can see that we had wired up language context in here.

22
00:01:30,740 --> 00:01:36,730
Remember we use the language contex consumer so in this case we are still taking in the value which

23
00:01:36,730 --> 00:01:41,160
is the current value inside of our context object or that kind of pipe of sorts.

24
00:01:41,380 --> 00:01:44,080
So once again this previously was a simple string.

25
00:01:44,080 --> 00:01:45,950
Now it is an object instead.

26
00:01:46,240 --> 00:01:50,700
So we can do structure out the language property.

27
00:01:51,760 --> 00:01:55,540
So make sure you get a set of parentheses and a set of curly braces.

28
00:01:55,690 --> 00:01:58,060
We'll pull out language and then we can pass it off to you.

29
00:01:58,090 --> 00:02:03,160
Render Submit now just for completion sake.

30
00:02:03,190 --> 00:02:06,340
We really should carry the same terminology of language all the way through.

31
00:02:06,340 --> 00:02:08,820
These arguments appear to render submit.

32
00:02:08,920 --> 00:02:10,130
It doesn't make a difference.

33
00:02:10,180 --> 00:02:15,220
It's just good practice to have the very same terminology being passed all around the same component

34
00:02:15,550 --> 00:02:19,960
so I don't change value appear to language and in sight of render submit.

35
00:02:19,990 --> 00:02:21,710
I'll change that to language as well.

36
00:02:21,760 --> 00:02:22,960
Again that is not required.

37
00:02:22,960 --> 00:02:25,130
It is just good practice.

38
00:02:25,420 --> 00:02:31,290
So now it can flip back over all refresh the page again and once again I can click on the flag and I'll

39
00:02:31,300 --> 00:02:34,730
see both the label and the button text change.

40
00:02:34,930 --> 00:02:35,970
All right so that's pretty much it.

41
00:02:35,980 --> 00:02:39,740
That is how we can use a context in place of redux.

42
00:02:39,760 --> 00:02:45,010
We did it by crazy creating this language store which is a Riak component that contains all of our data

43
00:02:45,100 --> 00:02:47,260
and our business logic.

44
00:02:47,320 --> 00:02:50,200
So hopefully this example makes at least a little bit of sense.

45
00:02:50,200 --> 00:02:54,460
Let's take a quick pause right here and I want to point out a couple of weaknesses around this approach

46
00:02:54,790 --> 00:03:00,130
and just kind of point out a couple of reasons that you might want to continue to use redox in any application

47
00:03:00,130 --> 00:03:02,230
that you plan to work on in the future.

48
00:03:02,230 --> 00:03:04,110
So quick break and I'll see you in just a minute.