1
00:00:02,570 --> 00:00:08,780
State can be complex and it's important to understand this to understand which problems state management

2
00:00:08,780 --> 00:00:12,220
solutions like Redux actually solve.

3
00:00:12,320 --> 00:00:17,930
If we had an app like this, which is not the app we built but which could be an app you're building where

4
00:00:17,930 --> 00:00:23,180
you have two different areas, one where you manage your users, where users can sign in, where users can

5
00:00:23,180 --> 00:00:28,100
manage their dashboard, see their dashboard and so on and one where you have products in a list which

6
00:00:28,100 --> 00:00:30,100
users can add to a cart,

7
00:00:30,100 --> 00:00:35,480
then these areas are actually not totally independent but in your app, they will be rendered on different

8
00:00:35,480 --> 00:00:38,290
screens, so pretty separated from each other.

9
00:00:38,630 --> 00:00:44,630
But the question whether a user is signed in which you need here might also be relevant in another part

10
00:00:44,630 --> 00:00:46,100
of your application

11
00:00:46,280 --> 00:00:52,550
and right now, you normally would have to pass that data around manually through props by passing it

12
00:00:52,550 --> 00:00:57,930
from component A to B to C to D all the way up to E where you then maybe need this,

13
00:00:57,970 --> 00:01:00,490
that's not really very convenient.

14
00:01:00,500 --> 00:01:06,980
Instead you want to have an application setup where something changes, for example a user signs in or

15
00:01:06,980 --> 00:01:07,900
in our meals app,

16
00:01:07,910 --> 00:01:15,080
you set a certain filter and you save that and then this information is kind of propagated to your app

17
00:01:15,080 --> 00:01:19,420
and automatically passed to the places where you need it but not through props

18
00:01:19,520 --> 00:01:26,120
but with some behind the scenes mechanism that helps you regarding this and that's where Redux is a

19
00:01:26,120 --> 00:01:31,370
common solution we use in React and React Native apps to manage that state.

20
00:01:31,370 --> 00:01:33,170
Now how does Redux work?

21
00:01:33,200 --> 00:01:38,420
First of all Redux is a third-party library which you can add to React Native to use it there and it's

22
00:01:38,450 --> 00:01:45,050
all about having a central store. Redux introduces a central store in memory, not a database but it's

23
00:01:45,110 --> 00:01:51,950
in memory, in Javascript memory so to say where your application state, so the data different parts of

24
00:01:51,950 --> 00:01:58,070
your app depend on can be stored in and then when in one component, you have something that wants to

25
00:01:58,070 --> 00:01:59,280
manipulate that state,

26
00:01:59,330 --> 00:02:03,740
for example we're setting a filter or we're marking a meal as a favorite,

27
00:02:03,770 --> 00:02:10,610
we then dispatch a so-called action, that's a pre-defined information package you would say, having a certain

28
00:02:10,610 --> 00:02:15,840
schema which can be handled by Redux as configured by you.

29
00:02:15,860 --> 00:02:20,800
This action reaches a so-called reducer and you will be the one writing that reducer

30
00:02:20,810 --> 00:02:25,270
as a developer, so you can control which kind of action a reducer accepts,

31
00:02:26,060 --> 00:02:32,180
so which kind of information package your reducer requires and that reducer then receives the action

32
00:02:32,480 --> 00:02:39,670
and derives a new state based on the old state which then updates this centrally stored state. So the reducer

33
00:02:39,660 --> 00:02:42,500
is there to update the state in the end.

34
00:02:42,500 --> 00:02:48,080
And when that store changes, when the state in there changes, you can also have subscriptions to that

35
00:02:48,080 --> 00:02:53,050
store from other components, these subscriptions will be triggered when your store, when your state there

36
00:02:53,090 --> 00:02:57,340
changes and the updated state is then passed on to the places in your app,

37
00:02:57,380 --> 00:03:01,040
so to the components who are interested in these changes,

38
00:03:01,040 --> 00:03:05,720
for example this component here could be interested in some updates, well then it can set up a subscription

39
00:03:05,900 --> 00:03:08,190
and it will be informed about the update and get

40
00:03:08,190 --> 00:03:14,130
the new state through its props or also with React hooks as you will learn in this module.

41
00:03:14,240 --> 00:03:19,620
This is how Redux works and that's the idea behind Redux.

42
00:03:19,700 --> 00:03:27,020
Now one important note, if you're a bit further into React, you also probably know the React Context API

43
00:03:27,050 --> 00:03:29,770
which is built into React.

44
00:03:29,810 --> 00:03:36,980
This can also be used for some behind the scenes state and data management but it's not a good replacement

45
00:03:36,980 --> 00:03:39,710
for all use cases where you use Redux.

46
00:03:39,710 --> 00:03:45,160
I'll not dive deeper into this here because this isn't really a course about the in and outs of different

47
00:03:45,170 --> 00:03:50,930
React constructs, instead we want to learn React Native here but attached, you'll find some resources that

48
00:03:50,930 --> 00:03:58,030
help you with that comparison between React Context API and Redux and when to use which. In this module,

49
00:03:58,050 --> 00:04:02,490
we'll use Redux which is very flexible, which we can definitely use and I will show you how to set it

50
00:04:02,490 --> 00:04:05,870
up with React Native and how you then of course may work with it.