1
00:00:02,260 --> 00:00:05,160
We already improved this project quite a lot,

2
00:00:05,170 --> 00:00:08,240
now there's one other thing I want to bring to your attention.

3
00:00:08,410 --> 00:00:15,970
If this project gets deployed, everyone will be able to look into your store with the redux dev tools.

4
00:00:16,060 --> 00:00:18,830
That's not strictly or necessarily a problem,

5
00:00:18,880 --> 00:00:24,330
in the end people can always look into your javascript code if they really want to, you can't encrypt

6
00:00:24,340 --> 00:00:32,800
it but you maybe want to make it a bit harder and not as obvious to access your state. To do that, you

7
00:00:32,800 --> 00:00:40,240
can go into your index.js file which is where we unlocked the redux dev tools and we can adjust this

8
00:00:40,240 --> 00:00:49,030
code a tiny bit to only unlock it if we are in development mode and not do it if we are in production

9
00:00:49,030 --> 00:00:55,900
mode. To do that, we can take advantage of a feature called environment variables in our create react app

10
00:00:56,220 --> 00:00:57,160
project

11
00:00:57,280 --> 00:01:05,930
and this is a feature which is project set up specific, we can use environment variables, we can define

12
00:01:06,130 --> 00:01:11,130
them in the config folder, there in the env.js file,

13
00:01:11,200 --> 00:01:17,590
you can basically add your own environment variables, you can add them down here where you see NODE_ENV

14
00:01:17,800 --> 00:01:22,360
and public URL. Now the NODE_ENV thing here is interesting,

15
00:01:22,360 --> 00:01:25,420
it's automatically set for you and it is development

16
00:01:25,420 --> 00:01:32,410
if you're in development mode. So with that, we can go to our index.js file and just need to access

17
00:01:32,410 --> 00:01:37,750
this variable to only set this extension if we are in development mode.

18
00:01:37,750 --> 00:01:43,990
We access our environment variables and again, this works to this specific project set up by calling

19
00:01:43,990 --> 00:01:46,810
process which is a global variable which is available here,

20
00:01:46,810 --> 00:01:53,130
we don't have to import it, env for environment and there we can access NODE_ENV,

21
00:01:53,170 --> 00:01:56,590
that's this environment variable you just saw which is development

22
00:01:56,590 --> 00:01:58,950
for example, during development.

23
00:01:58,990 --> 00:02:02,320
So then we can check if this is equal to development

24
00:02:02,790 --> 00:02:09,270
and if it is, then this is a ternary expression, we'll use the redux dev tools as we did before,

25
00:02:09,310 --> 00:02:14,740
if it's not, I'll set it to null and then we have this OR comparation

26
00:02:14,740 --> 00:02:18,630
so if the first part is null, we'll use the default compose function.

27
00:02:18,820 --> 00:02:23,450
So now redux dev tools will only be available in the development environment.

28
00:02:23,500 --> 00:02:26,160
If we save this and we go back and reload the page,

29
00:02:26,320 --> 00:02:27,250
nothing changes,

30
00:02:27,250 --> 00:02:33,270
we still see our redux inspector but you later see once we deploy the application, this will not work

31
00:02:33,300 --> 00:02:34,120
anymore.