1
00:00:02,210 --> 00:00:04,770
So we learn about redux and the redux-basics.js

2
00:00:04,850 --> 00:00:05,650
file.

3
00:00:05,780 --> 00:00:08,950
We don't work with that file anymore now, instead

4
00:00:08,970 --> 00:00:15,230
now, I want to connect my react application to redux and use the advantages of redux in it, so that

5
00:00:15,230 --> 00:00:21,830
in the end, I managed my state with this counter and the buttons here with redux. Of course for such a

6
00:00:21,830 --> 00:00:27,590
simple application like this one, redux might be overkill but it is good to use a simpler application

7
00:00:27,740 --> 00:00:32,490
to practice the basics, we'll then apply redux to our course project in the next module too,

8
00:00:32,570 --> 00:00:33,950
no worries.

9
00:00:33,950 --> 00:00:36,250
Now we already installed redux

10
00:00:36,590 --> 00:00:39,370
and with that, we can create a store.

11
00:00:39,370 --> 00:00:45,820
This store should be created right before our application or when our application starts, so the index.js

12
00:00:45,870 --> 00:00:51,610
file is a great place, this is where we mount our app component to the dom,

13
00:00:51,710 --> 00:00:55,160
so creating the store here also makes a lot of sense.

14
00:00:55,160 --> 00:01:01,740
Therefore I'll import something and now I'll use the good old ES6 imports here from redux,

15
00:01:01,760 --> 00:01:08,660
so from the redux package we installed, and the something is the createStore function.

16
00:01:08,820 --> 00:01:15,060
Then before mounting the app, I'll create the store and store it in a constant named store

17
00:01:15,060 --> 00:01:18,240
so a lot of stores are here I guess.

18
00:01:18,240 --> 00:01:21,150
So I create my store with create store,

19
00:01:21,150 --> 00:01:26,690
now you learned that this takes a reducer as the input. For that,

20
00:01:26,700 --> 00:01:33,090
I of course need to create the reduced too and I won't do this in this file, I will have more complex

21
00:01:33,090 --> 00:01:39,930
reducers in react applications with a lot of code for different types of actions and therefore, we typically

22
00:01:39,930 --> 00:01:42,810
store that logic into their own files.

23
00:01:42,810 --> 00:01:49,140
Now there are different set ups you can use but you'll often see that there is a store folder in your

24
00:01:49,140 --> 00:01:55,830
project next to the containers and the components folder and in there, you can have a reducer.js

25
00:01:55,830 --> 00:01:56,570
file,

26
00:01:56,580 --> 00:02:03,930
this will now be the file where I'll export the reducer I want to use. Still the reducer is just a function,

27
00:02:04,280 --> 00:02:11,670
a function which retrieves a state and an action and then has to return a state, that doesn't change

28
00:02:11,670 --> 00:02:12,940
a bit.

29
00:02:12,960 --> 00:02:19,950
I will then export this as the file default so that we can use it outside of this file and I will also

30
00:02:19,950 --> 00:02:22,440
set up an initial state here,

31
00:02:22,740 --> 00:02:30,170
a javascript object which should reflect my initial state for that reducer. I'll set this to counter zero

32
00:02:30,210 --> 00:02:37,830
here too because we have a counter in this application. Now I'll assign it here for my state, initial state

33
00:02:37,830 --> 00:02:38,740
like this

34
00:02:39,370 --> 00:02:43,470
and with that, we got a finished reducer.

35
00:02:43,480 --> 00:02:46,270
Now we can import this in the index.js file,

36
00:02:46,420 --> 00:02:50,080
so I'll add an import, import reducer from

37
00:02:50,200 --> 00:02:57,810
and now ./store/reducer.js without the extension as always and pass that to create store.

38
00:02:58,060 --> 00:03:01,820
With that we're creating a store successfully with our own reducer,

39
00:03:01,990 --> 00:03:05,570
just like we learned before in the nodeJS file.

40
00:03:05,590 --> 00:03:08,630
Now of course the reducer alone doesn't do that much,

41
00:03:08,650 --> 00:03:16,480
we also want to connect this store which you just create and store in a constant here to our react

42
00:03:16,480 --> 00:03:24,430
application and we want to be able to get slices off the state in our react containers, so that we can

43
00:03:24,430 --> 00:03:29,620
display the state or render something depending on which state the application has.

44
00:03:29,620 --> 00:03:35,590
And of course we also want to be able to dispatch actions, so connecting redux to react,

45
00:03:35,590 --> 00:03:37,140
that is what we'll do next.