1
00:00:00,560 --> 00:00:05,180
When it comes to redux essentially we need to remember understand only few following building blocks

2
00:00:05,630 --> 00:00:06,290
in redux.

3
00:00:06,320 --> 00:00:12,560
Store is a single piece of truth and you can think of it as a global state in the Ori act that in fact

4
00:00:12,560 --> 00:00:17,270
terms store and state are used interchangeably when covering redux.

5
00:00:17,330 --> 00:00:19,290
When we think of it it's nothing new to us.

6
00:00:19,310 --> 00:00:23,860
In a previous project we used context API in a very similar way.

7
00:00:23,870 --> 00:00:29,900
The major difference between redux in context API is the way we can update our state you see when it

8
00:00:29,900 --> 00:00:30,910
comes to redux.

9
00:00:31,010 --> 00:00:34,650
We cannot update store directly and that is not allowed.

10
00:00:34,770 --> 00:00:40,910
The way we update our store and redux is by dispatching an action and you can think of actions as what

11
00:00:40,970 --> 00:00:42,100
we would want to do.

12
00:00:42,110 --> 00:00:45,190
For example you want to add a product to the car.

13
00:00:45,470 --> 00:00:48,050
You will dispatch an ad to court action.

14
00:00:48,050 --> 00:00:53,010
You want to open up the model you will dispatch open model action and hopefully you get the gist.

15
00:00:53,030 --> 00:00:55,490
Once you dispatch the action you can handle it.

16
00:00:55,490 --> 00:01:01,250
In reducer and reduce there is nothing more than a function that takes two arguments state and action

17
00:01:01,640 --> 00:01:07,520
when it comes to state argument you can think of it as an old state or state before action was dispatched

18
00:01:07,890 --> 00:01:09,750
an action argument provides the info.

19
00:01:09,770 --> 00:01:11,970
What type of action was dispatched.

20
00:01:12,050 --> 00:01:16,310
The key about reducer is that it does not mutate state directly.

21
00:01:16,400 --> 00:01:22,340
In fact you always always should return a new state from reducer in reducer we're going to handle.

22
00:01:22,460 --> 00:01:27,070
What action is dispatched and update our new state appropriately.

23
00:01:27,170 --> 00:01:33,380
Once we return a state from reducer that becomes our new state and we can start all over to give you

24
00:01:33,380 --> 00:01:37,830
an example imagine we have a shopping cart and we would want to add an item to the cart.

25
00:01:38,090 --> 00:01:41,330
So our shopping cart is going to be our store.

26
00:01:41,330 --> 00:01:43,340
That could be an object that could be an array.

27
00:01:43,380 --> 00:01:48,380
Doesn't really matter so we're going to access our store and we're going to display in our application

28
00:01:48,770 --> 00:01:51,060
what items are already in the car.

29
00:01:51,380 --> 00:01:56,810
Now the thing is if I would want to add an item to the cart I'm not just going to click on a button

30
00:01:56,870 --> 00:02:00,160
and directly access the store and then update the store.

31
00:02:00,170 --> 00:02:03,370
And of course display all the items that have been added to the cart.

32
00:02:03,410 --> 00:02:05,010
That is not allowed.

33
00:02:05,210 --> 00:02:11,370
In fact once we click on Add To Cart button then we're going to dispatch an action we can name our actions.

34
00:02:11,380 --> 00:02:17,060
However we would want but most likely adding to the cart is going to be add to cart action and then

35
00:02:17,060 --> 00:02:23,210
once we dispatch our add to cart action then we're going to handle it in reducing and reducing is going

36
00:02:23,210 --> 00:02:29,570
to take the old state so the state before action was dispatched and then it's just going to check okay.

37
00:02:29,750 --> 00:02:35,270
What we would want to do when we're handling the Add to Cart action and of course since in our case

38
00:02:35,270 --> 00:02:37,210
we would want to add item to the cart.

39
00:02:37,280 --> 00:02:41,360
We are going to copy the old state values update the cart.

40
00:02:41,390 --> 00:02:45,050
Make sure that we added the item and then return our new state.

41
00:02:45,050 --> 00:02:48,500
So once we return our new state that becomes our state.

42
00:02:48,860 --> 00:02:51,840
If we would want to do it all over again we can definitely do it.

43
00:02:51,860 --> 00:02:55,710
If we would want to let's say dispatch a different action remove items and cart.

44
00:02:55,790 --> 00:03:01,790
We're gonna do the same thing only in this time we're dispatching remove item from the cart and then

45
00:03:01,790 --> 00:03:05,260
of course in reducer we're also handling a bit differently.

46
00:03:05,270 --> 00:03:10,970
However it doesn't change the main idea where we cannot update the store directly from the yard.

47
00:03:11,210 --> 00:03:16,920
We need to dispatch an action design that needs to go through reducer and only the state that is returned

48
00:03:17,100 --> 00:03:19,730
from reducer is our new state.