1
00:00:00,560 --> 00:00:05,020
In last video we spoke about where we are going to trigger some programmatic navigation.

2
00:00:05,040 --> 00:00:09,960
So immediately after we successfully create our Stream we're going to attempt to navigate our user automatically

3
00:00:09,960 --> 00:00:11,670
back to our route route.

4
00:00:11,700 --> 00:00:15,890
Now in this video we're going to talk about how we actually do programmatic navigation.

5
00:00:15,900 --> 00:00:17,780
Now here's the good news and the bad news.

6
00:00:17,940 --> 00:00:24,210
The good news is that programmatic navigation sometimes with re-act writer Dom is really easy but sometimes

7
00:00:24,240 --> 00:00:26,660
it's really not easy at all.

8
00:00:26,670 --> 00:00:32,610
So unfortunately we are in one of the scenarios where it is not super easy to do programmatic navigation.

9
00:00:32,640 --> 00:00:33,710
Let me tell you why.

10
00:00:34,070 --> 00:00:34,700
OK.

11
00:00:34,950 --> 00:00:36,650
So quick diagram here.

12
00:00:37,860 --> 00:00:40,080
Now we've looked at this diagram quite a while ago.

13
00:00:40,110 --> 00:00:45,540
Remember we have a browser router at the very top of our component hierarchy internally internally the

14
00:00:45,540 --> 00:00:48,070
browser router creates this history object.

15
00:00:48,090 --> 00:00:52,980
Remember we spoke about how this history object keeps track of the address in the address bar of your

16
00:00:52,980 --> 00:00:54,440
browser up at the top.

17
00:00:54,480 --> 00:00:59,190
So anytime that address changes the history object is going to communicate the change over to the browser

18
00:00:59,190 --> 00:00:59,890
router.

19
00:01:00,210 --> 00:01:06,540
Now the history object over here is not only about watching the address bar the history object also

20
00:01:06,540 --> 00:01:10,030
has the ability to change the address bar as well.

21
00:01:10,110 --> 00:01:13,460
And that's how we're going to do pro programmatic navigation.

22
00:01:13,480 --> 00:01:16,470
We are going to make use of this history object.

23
00:01:16,470 --> 00:01:20,910
Now the reason that is said had said that sometimes programmatic navigation is easy and sometimes that's

24
00:01:20,910 --> 00:01:27,020
hard is the fact that this history object is created by the browser router.

25
00:01:27,360 --> 00:01:33,270
In other words it is kind of challenging for you and I to write code that can get a handle or a reference

26
00:01:33,330 --> 00:01:35,100
to that history object.

27
00:01:35,100 --> 00:01:37,690
It is more challenging than you might expect.

28
00:01:38,040 --> 00:01:39,310
Let me show you why.

29
00:01:39,790 --> 00:01:40,100
OK.

30
00:01:40,140 --> 00:01:44,410
So here's essentially what goes on in normal operation with re-act router.

31
00:01:44,850 --> 00:01:50,490
Internally the browser router creates this history object then any time that the browser router renders

32
00:01:50,490 --> 00:01:55,920
some component like let's say PAGE ONE Capone right here the browser router passes that history object

33
00:01:56,130 --> 00:01:58,860
as a prop down to your component.

34
00:01:58,860 --> 00:02:04,560
So inside of any component that gets rendered directly by re-act router it's going to receive this history

35
00:02:04,560 --> 00:02:05,090
object.

36
00:02:05,100 --> 00:02:09,660
And so this Complan right here could very easily trigger some navigation inside of it.

37
00:02:09,660 --> 00:02:11,080
Now that's the key word here.

38
00:02:11,190 --> 00:02:14,540
The component could easily trigger navigation inside of it.

39
00:02:14,760 --> 00:02:20,550
But in our case we are not trying to do navigation from a component we are trying to do navigation from

40
00:02:20,610 --> 00:02:28,990
an action creator getting access to this history object inside of a action creator or any non-HD Riak

41
00:02:29,000 --> 00:02:33,840
component essentially is what is a little bit challenging it is hard for us to get a reference to that

42
00:02:33,840 --> 00:02:35,430
history object.

43
00:02:35,430 --> 00:02:40,390
One very simple solution would be to do something like this.

44
00:02:40,500 --> 00:02:45,420
So weve got our history object that gets created by the browser router the browser router communicates

45
00:02:45,420 --> 00:02:51,120
the history object down to our component and then we could say that any time that our component calls

46
00:02:51,120 --> 00:02:56,850
or action creator the component should pass along the history object into the action creator.

47
00:02:57,000 --> 00:03:02,430
And so that's essentially saying that inside of our action Krater right year we would receive not only

48
00:03:02,430 --> 00:03:06,120
our form values but also some history object as well.

49
00:03:06,120 --> 00:03:11,070
Now this is kind of a pain because it means that every single time we want to do programmatic navigation

50
00:03:11,280 --> 00:03:15,810
we would have to write our action creators to be called with a history object and we would make sure

51
00:03:15,810 --> 00:03:20,660
that all of our components called the action creator with the history object as well.

52
00:03:20,670 --> 00:03:24,310
So even though this is possible it is not super ideal.

53
00:03:24,330 --> 00:03:29,130
So were going to use an alternative solution and remember the solution when I show it to you is going

54
00:03:29,130 --> 00:03:30,260
to look a little bit weird.

55
00:03:30,270 --> 00:03:35,400
The reason we are going through the solution is that just getting access to this history object is a

56
00:03:35,400 --> 00:03:36,710
pain.

57
00:03:36,720 --> 00:03:38,130
All right so heres a solution.

58
00:03:38,130 --> 00:03:43,380
Remember I told you that the browser router internally creates the history object and the fact that

59
00:03:43,380 --> 00:03:48,690
the browser router maintains that history object is what makes our life all that challenging.

60
00:03:48,690 --> 00:03:52,910
So essentially we're just going to kind of turn the tables on the browser router.

61
00:03:53,220 --> 00:03:56,980
You and I are going to create the history object instead.

62
00:03:57,270 --> 00:04:02,880
So you and I are going to create a history object inside of a dedicated file inside of our project.

63
00:04:03,090 --> 00:04:07,710
Then any time that you and I want to get access to that history object we're just going to import that

64
00:04:07,710 --> 00:04:08,270
file.

65
00:04:08,340 --> 00:04:14,160
We're going to import the history object very easily because we are maintaining control over the history

66
00:04:14,160 --> 00:04:20,110
object ourselves and we are not allowing re-act router to create the history object itself.

67
00:04:20,400 --> 00:04:22,530
So that's how we get easy control over it.

68
00:04:22,560 --> 00:04:29,100
This history object we created ourselves as opposed to allowing re-act router to create it now is a

69
00:04:29,130 --> 00:04:33,080
little bit of just odds and ends here just fine grained details.

70
00:04:33,150 --> 00:04:37,950
When we create this history object we're going to create a history object that is the corresponding

71
00:04:37,950 --> 00:04:40,510
type to whatever router we had created.

72
00:04:40,680 --> 00:04:46,230
So remember before we had made a browser router whenever you create a browser router internally that

73
00:04:46,230 --> 00:04:52,890
creates an object not just called history it's the browser history object or like the browser flavor

74
00:04:52,950 --> 00:04:54,450
of the history object.

75
00:04:54,690 --> 00:05:00,060
If you watch that optional video many many many videos around a go around browser router and hash router

76
00:05:00,080 --> 00:05:01,090
in memory router.

77
00:05:01,230 --> 00:05:03,890
You'll recall that essentially these different routers.

78
00:05:03,900 --> 00:05:08,670
And now I'm telling you the history object as well just changes what part of the neural that re-act

79
00:05:08,670 --> 00:05:12,120
router looks at to decide where a user is trying to navigate to.

80
00:05:12,120 --> 00:05:18,030
So when I say browser history we are creating a history object that is going to look at everything after

81
00:05:18,030 --> 00:05:25,890
the port or the domain of your address to decide what content to show on the screen because we are now

82
00:05:25,890 --> 00:05:27,670
creating our own history object.

83
00:05:27,680 --> 00:05:33,900
We are no longer going to create a browser router object as the top of our component hierarchy.

84
00:05:34,020 --> 00:05:40,290
Instead we are going to create a create a plain router we create a plain router when we create the history

85
00:05:40,290 --> 00:05:42,240
object ourselves again.

86
00:05:42,330 --> 00:05:47,280
It's not like the worst thing I would think I'm making a little bit more complicated than it needs to

87
00:05:47,280 --> 00:05:47,960
be here.

88
00:05:48,000 --> 00:05:53,610
Essentially when we create a browser router browser router internally decides to create a browser history

89
00:05:53,670 --> 00:05:57,610
so now that we are creating a browser history ourselves we use a generic router.

90
00:05:57,630 --> 00:06:00,760
That's basically it putting in much more simple terms.

91
00:06:01,290 --> 00:06:02,290
Okay enough discussion.

92
00:06:02,310 --> 00:06:03,650
Let's actually get to business here.

93
00:06:03,690 --> 00:06:10,170
Let's take a quick pause and we'll start putting together this custom browser router between browser

94
00:06:10,170 --> 00:06:12,070
history object in the next video.