1
00:00:02,170 --> 00:00:10,030
So let's start by installing redux and react-redux so I'll quit the npm start process and I'll simply

2
00:00:10,030 --> 00:00:19,870
run npm install --save redux and react-redux, hit enter to install these two packages so

3
00:00:19,870 --> 00:00:26,590
that we can use them here and can conveniently access our redux store in the react application.

4
00:00:26,860 --> 00:00:28,060
Once this is finished,

5
00:00:28,060 --> 00:00:35,680
you can of course restart your build process and the development server with npm start to see your lovely application

6
00:00:35,680 --> 00:00:36,740
again.

7
00:00:37,000 --> 00:00:46,240
Now with both installed, it's of course about time to again create our store, the reducer and the actions. For

8
00:00:46,240 --> 00:00:46,900
that, I'll

9
00:00:46,930 --> 00:00:53,570
again reintroduce a folder directly in the source folder which i'll name store and in there,

10
00:00:53,620 --> 00:00:55,570
I'll add a new file, reducer.js

11
00:00:55,620 --> 00:00:56,440
.

12
00:00:56,560 --> 00:00:58,080
and of course actions.js

13
00:00:58,130 --> 00:01:02,460
because I want to export my actions as constants

14
00:01:02,580 --> 00:01:09,640
to again prevent me from mistyping or introducing some errors just because I try to hard code strings

15
00:01:09,640 --> 00:01:10,890
in multiple files.

16
00:01:11,580 --> 00:01:19,970
So therefore, let's now start with the basic action types we'll probably need, if we start with the burger builder

17
00:01:20,100 --> 00:01:23,420
and really the core functionality of building that burger,

18
00:01:23,610 --> 00:01:29,450
we can dive into the burger builder container and have a look at the methods we created there.

19
00:01:29,520 --> 00:01:34,210
We got an addIngredientHandler and we get a removeIngredientHandler,

20
00:01:34,320 --> 00:01:39,990
these of course are the two main things we do, add ingredients and remove ingredients, so therefore we

21
00:01:39,990 --> 00:01:42,180
probably want appropriate actions,

22
00:01:42,510 --> 00:01:49,810
export a constant which we'll name addIngredients and assign a string with the same value,

23
00:01:49,940 --> 00:01:58,570
addIngredients and then duplicate it to also create the respective action for removing ingredients.

24
00:01:58,580 --> 00:01:59,520
And actually we can name it

25
00:01:59,540 --> 00:02:00,680
addIngredient,

26
00:02:00,710 --> 00:02:05,620
removeIngredient because we never add more than one or remove more than one at a time.

27
00:02:05,900 --> 00:02:11,280
So we get these two actions and before we add more, let's start with this, let's build up the store with

28
00:02:11,280 --> 00:02:16,220
this and then let's add more and more functionality over to the next lectures.

29
00:02:16,250 --> 00:02:20,850
Next let's implement or start implementing our reducer,

30
00:02:20,900 --> 00:02:26,840
there I will import everything as action types from these actions.js

31
00:02:26,840 --> 00:02:28,270
file,

32
00:02:28,520 --> 00:02:35,150
then I'll create a constant initialState to define what my state should look like initially and in

33
00:02:35,150 --> 00:02:40,400
there, we probably want to have the same state we already use in the burger builder. There if we scroll

34
00:02:40,400 --> 00:02:41,030
up,

35
00:02:41,140 --> 00:02:43,220
we got of course a lot of fields, now

36
00:02:43,220 --> 00:02:46,330
I said I want to start with ingredients and the total price

37
00:02:46,330 --> 00:02:50,930
so let's copy these two and move them over into the reducer.

38
00:02:50,930 --> 00:02:54,600
So now we get ingredients and total price there too in the initial state.

39
00:02:54,950 --> 00:03:02,750
Then we can create the reducer itself, a function simply, maybe stored in a constant named reducer, using

40
00:03:02,750 --> 00:03:07,810
the ES6 function syntax where we get the state which is set to initialState

41
00:03:07,970 --> 00:03:14,300
well initially, in case you get undefined as a state which we do with the first time this runs and then

42
00:03:14,420 --> 00:03:18,730
let's also add the action which we'll also receive here.

43
00:03:18,870 --> 00:03:20,830
Now at the end of everything,

44
00:03:20,850 --> 00:03:27,640
I of course also want to export my reducer as the file default. Now we'll of course have to fill this

45
00:03:27,640 --> 00:03:33,370
reducer with some life, we'll do so in the next lecture. Before we do that

46
00:03:33,370 --> 00:03:40,510
let's set up the state management in the index.js file where we wrap our entire application and there,

47
00:03:40,510 --> 00:03:42,700
we already see something interesting,

48
00:03:42,700 --> 00:03:47,350
we already do wrap our application here with the browser router.

49
00:03:47,350 --> 00:03:54,160
That of course can lead to confusion or maybe it is something we haven't looked at before,

50
00:03:54,160 --> 00:04:03,360
where should we now add our provider component from react-redux, inside of the browser router or outside?

51
00:04:03,370 --> 00:04:06,640
Let's set this up together in the next lecture.