1
00:00:01,260 --> 00:00:04,230
In the last section we did some very early set up on our project.

2
00:00:04,320 --> 00:00:08,760
We've got this app component put together and you'll notice that I created as a functional component

3
00:00:08,790 --> 00:00:13,440
as opposed to the class based component that has been in almost every app that we've put together so

4
00:00:13,440 --> 00:00:14,360
far.

5
00:00:14,370 --> 00:00:19,140
Remember we usually make use of class based components any time that we want a component to build to

6
00:00:19,140 --> 00:00:20,830
make use of state.

7
00:00:21,120 --> 00:00:26,400
Now that we are making use of redux we're going to see that we make use of component level state much

8
00:00:26,490 --> 00:00:27,880
less frequently.

9
00:00:28,170 --> 00:00:32,540
Instead we're going to generally store all of our data inside of redux instead.

10
00:00:32,910 --> 00:00:38,280
Now just so you know there are some scenarios where we want to have state or data inside of redux and

11
00:00:38,280 --> 00:00:41,070
state inside of our reaction opponents as well.

12
00:00:41,100 --> 00:00:42,970
We'll see some of those scenarios later on.

13
00:00:43,110 --> 00:00:47,550
But for right now we're just going to say that in general all the state that was inside of our re-act

14
00:00:47,550 --> 00:00:50,880
up is now going to be on the redux side of things instead.

15
00:00:51,300 --> 00:00:56,940
So what that means is a much simpler and much more simple straightforward app component.

16
00:00:56,940 --> 00:00:57,240
All right.

17
00:00:57,240 --> 00:01:01,140
So now in this video I want to tell you a little bit more about how we're going to design the redux

18
00:01:01,140 --> 00:01:02,820
side of our application.

19
00:01:02,820 --> 00:01:07,020
After that we'll take a look at how we're going to organize our project directory and where we're going

20
00:01:07,020 --> 00:01:12,200
to create some of those things like the action creators and reducers and all that kind of good stuff.

21
00:01:13,270 --> 00:01:18,370
But first I want to give you a quick discussion on how we're going to get react and redux to get integrated

22
00:01:18,370 --> 00:01:21,580
together and we're going to think about the general redux design.

23
00:01:21,580 --> 00:01:25,740
All right so even though I just said that we're going to have states in side of redux.

24
00:01:25,780 --> 00:01:31,080
I want to imagine what we would do for this application if we were not making use of redux at all.

25
00:01:31,090 --> 00:01:33,940
So here's my idea on how we might approach this application.

26
00:01:33,940 --> 00:01:39,880
If we were not making use of Redux I think that the app component would have a list of songs and it

27
00:01:39,880 --> 00:01:43,570
would probably also record what the currently selected song was.

28
00:01:44,750 --> 00:01:49,640
The app component would then probably pass down that list of songs to the song list so that the song

29
00:01:49,640 --> 00:01:52,270
list knew what to show on the screen.

30
00:01:52,310 --> 00:01:57,850
In addition it would probably pass down a callback like on song select or something like that so that

31
00:01:57,890 --> 00:02:03,740
any time that the user clicks on that select button right there the song list could tell the app component

32
00:02:04,010 --> 00:02:06,940
that the user just selected some particular song.

33
00:02:10,230 --> 00:02:14,820
And then in addition for our song detail over here the only thing that the song detail really needs

34
00:02:14,820 --> 00:02:18,390
to know is what the currently selected song is.

35
00:02:18,390 --> 00:02:23,190
And so the app component would pass that down to the song detail as a prop and the song detail would

36
00:02:23,190 --> 00:02:26,680
simply render the details for that song out on the screen.

37
00:02:26,760 --> 00:02:31,800
So in total I think with re-act alone this would be a pretty simple and straightforward application.

38
00:02:32,070 --> 00:02:35,780
So how is this going to change now with redux.

39
00:02:35,790 --> 00:02:37,000
All right here we go.

40
00:02:37,350 --> 00:02:43,920
So just as before we're going to have our app component a song list and a song detail but the app component

41
00:02:43,950 --> 00:02:49,530
is going to be passing very little information down to the song list and the song detail.

42
00:02:49,610 --> 00:02:55,860
Instead we're going to abstract out all these ideas of creating a list of songs and selecting a song

43
00:02:55,890 --> 00:03:00,870
and what the currently selected song is into the redux side of our application.

44
00:03:00,870 --> 00:03:05,400
So we're going to create a producer that is going to produce a list of songs.

45
00:03:05,730 --> 00:03:10,560
We're also going to have a producer that records what the currently selected song is.

46
00:03:10,710 --> 00:03:13,480
That's the two pieces of state inside of our application.

47
00:03:13,500 --> 00:03:18,040
The list of songs and the currently selected song.

48
00:03:18,170 --> 00:03:22,760
And then finally we're going to make sure that we also have an action creator so that we can somehow

49
00:03:22,820 --> 00:03:24,410
change our state.

50
00:03:24,410 --> 00:03:27,870
Remember that's the only way that we change our state inside of a redux app.

51
00:03:27,920 --> 00:03:30,400
We have to call an action creator.

52
00:03:30,400 --> 00:03:35,420
So if you want to change what the currently selected song is we're going to call an action creator called

53
00:03:35,600 --> 00:03:42,560
something like select songs that will dispatch an action and tell this selected song producer to update

54
00:03:42,560 --> 00:03:46,680
its data and reflect the new current present picked song.

55
00:03:47,060 --> 00:03:52,110
Now one thing I want to mention very quickly here is that our song list reducer is going to pass.

56
00:03:52,130 --> 00:03:56,760
Creating a static list of songs like a fixed array of objects.

57
00:03:56,780 --> 00:04:01,610
So technically this doesn't really need to be data that is stored in redux at all but just to get an

58
00:04:01,610 --> 00:04:03,050
idea of the basics.

59
00:04:03,140 --> 00:04:08,710
We're going to throw that static unchanging list of songs into a reducer and essentially maintain it

60
00:04:08,710 --> 00:04:09,590
through the reducer.

61
00:04:09,650 --> 00:04:13,470
Even though like I said it's kind of technically overkill for what we're doing.

62
00:04:14,410 --> 00:04:15,330
OK so that's it.

63
00:04:15,370 --> 00:04:17,530
That's how we're gonna do this on the redux side.

64
00:04:17,550 --> 00:04:23,500
So now the question is how do we somehow get this state produced by the producers and somehow get this

65
00:04:23,500 --> 00:04:27,960
action creator to be called by our song list or are consumed by the song list.

66
00:04:28,150 --> 00:04:29,230
Let's take another brief pause.

67
00:04:29,230 --> 00:04:32,860
When we come back the next section I can't tell you exactly how that's going to happen.

68
00:04:33,010 --> 00:04:34,190
So quick break in all.

69
00:04:34,240 --> 00:04:35,720
Talk to you in just a minute.