We already improved this project quite a lot,
now there's one other thing I want to bring to your attention.
If this project gets deployed, everyone will be able to look into your store with the redux dev tools.
That's not strictly or necessarily a problem,
in the end people can always look into your javascript code if they really want to, you can't encrypt
it but you maybe want to make it a bit harder and not as obvious to access your state. To do that, you
can go into your index.js file which is where we unlocked the redux dev tools and we can adjust this
code a tiny bit to only unlock it if we are in development mode and not do it if we are in production
mode. To do that, we can take advantage of a feature called environment variables in our create react app
project
and this is a feature which is project set up specific, we can use environment variables, we can define
them in the config folder, there in the env.js file,
you can basically add your own environment variables, you can add them down here where you see NODE_ENV
and public URL. Now the NODE_ENV thing here is interesting,
it's automatically set for you and it is development
if you're in development mode. So with that, we can go to our index.js file and just need to access
this variable to only set this extension if we are in development mode.
We access our environment variables and again, this works to this specific project set up by calling
process which is a global variable which is available here,
we don't have to import it, env for environment and there we can access NODE_ENV,
that's this environment variable you just saw which is development
for example, during development.
So then we can check if this is equal to development
and if it is, then this is a ternary expression, we'll use the redux dev tools as we did before,
if it's not, I'll set it to null and then we have this OR comparation
so if the first part is null, we'll use the default compose function.
So now redux dev tools will only be available in the development environment.
If we save this and we go back and reload the page,
nothing changes,
we still see our redux inspector but you later see once we deploy the application, this will not work
anymore.