1
00:00:01,420 --> 00:00:06,370
We've now got two possible scenes for our application which means we need to figure out a way to navigate

2
00:00:06,400 --> 00:00:09,330
our users between them in the context of our app.

3
00:00:09,340 --> 00:00:15,490
We probably want a user to progress from the log in form over to the employee list screen only after

4
00:00:15,490 --> 00:00:18,040
they successfully log into our application.

5
00:00:18,040 --> 00:00:24,160
So I have a question for you where in our app do we know that a user just logged in successfully.

6
00:00:24,160 --> 00:00:26,330
Like where inside of our codebase.

7
00:00:26,710 --> 00:00:30,420
I think that would be the action creator inside of our action creator.

8
00:00:30,550 --> 00:00:32,560
So heres actions index.

9
00:00:32,650 --> 00:00:39,820
Yes if we go on down to log in user and find the log in users success function.

10
00:00:39,820 --> 00:00:44,080
This is where we know that a user has successfully logged into our application.

11
00:00:44,110 --> 00:00:49,950
So in other words right here is where we want to somehow forcibly navigate the user from the log and

12
00:00:49,950 --> 00:00:53,470
form seen on over to the employee list.

13
00:00:53,650 --> 00:00:57,140
So that just means that we need to figure out how to navigate the user.

14
00:00:57,160 --> 00:01:02,770
Fortunately this is one of the best features of re-act native router flux besides the ridiculous name

15
00:01:02,770 --> 00:01:03,840
of course.

16
00:01:03,970 --> 00:01:09,670
So to navigate a user to a different screen in our application we are first going to import a helper

17
00:01:09,670 --> 00:01:12,030
function at the top of this file.

18
00:01:12,060 --> 00:01:21,820
So going to go to the top and I'm going to import actions from re-act native router flux and do take

19
00:01:21,820 --> 00:01:22,090
note.

20
00:01:22,090 --> 00:01:28,030
We've got the curly braces on here make sure you get those then back down at the bottom of this file

21
00:01:28,270 --> 00:01:33,970
at the log user success function immediately after dispatching this action right here.

22
00:01:33,970 --> 00:01:38,120
We are going to make a function call from something on that actions object.

23
00:01:38,140 --> 00:01:45,430
So we are going to call actions dot employee list like so.

24
00:01:46,150 --> 00:01:47,870
So this employee list method right here.

25
00:01:47,890 --> 00:01:49,290
Where did this come from.

26
00:01:49,570 --> 00:01:50,470
Easy.

27
00:01:50,470 --> 00:01:51,730
Back inside the router.

28
00:01:51,790 --> 00:01:53,750
So let's go back over to the router file.

29
00:01:53,890 --> 00:01:59,420
Recall that we had created a scene and added a key to it of employee list.

30
00:01:59,940 --> 00:02:05,800
Any key is that we add to our scenes are instantly transcribed onto that actions object that we just

31
00:02:05,800 --> 00:02:06,440
saw.

32
00:02:06,670 --> 00:02:13,540
So any time that we want to navigate between one scene and another we can call actions Daut and then

33
00:02:13,540 --> 00:02:17,190
the scene name and that will automatically navigate us over.

34
00:02:17,200 --> 00:02:21,260
So let's test this out in the simulator now in the simulator.

35
00:02:21,640 --> 00:02:23,240
I'm going to refresh.

36
00:02:23,710 --> 00:02:27,770
Then we'll log in with a valid log in record.

37
00:02:27,940 --> 00:02:31,140
So I'll use my test at test dot com info.

38
00:02:31,590 --> 00:02:37,150
And now when I hit log in this Should successfully log us to the application and then navigate us over

39
00:02:37,150 --> 00:02:38,560
to the employee list screen.

40
00:02:38,560 --> 00:02:44,500
So a click log in and then we get navigated automatically on over.

41
00:02:44,560 --> 00:02:49,510
Now when we do so you'll notice that there is a blue back button up here which doesn't really make a

42
00:02:49,510 --> 00:02:55,540
lot of sense because once again this should really be something more like hey log out or something like

43
00:02:55,540 --> 00:02:55,950
that.

44
00:02:56,020 --> 00:03:02,170
But I do want to point out that it really is a great feature of re-act me and router flux to automatically

45
00:03:02,170 --> 00:03:04,030
take care of this button for us.

46
00:03:04,060 --> 00:03:08,680
So even though for these two particular screens it doesn't make the most sense in the world to build

47
00:03:08,680 --> 00:03:11,410
a freely go back and forth between them too usually.

48
00:03:11,440 --> 00:03:16,510
It definitely makes sense or it is really nice that re-act need a router flux automatically set us up

49
00:03:16,600 --> 00:03:18,610
set that up for us.

50
00:03:18,610 --> 00:03:21,550
So navigating between screens pretty straightforward.

51
00:03:21,580 --> 00:03:29,010
All we need to do is import that actions object so actions from re-act native Retter flux and then to

52
00:03:29,010 --> 00:03:35,840
navigate to a particular scene we call actions dot and then the key from the scene that we want to visit.

53
00:03:35,840 --> 00:03:36,310
Cool.

54
00:03:36,510 --> 00:03:40,040
So let's take a break here and continue on into the next section.