So recently I started to implement a database in a react app (like any real world app would have). My question is Why is redux needed? I mean if you have a database you can push information directly in a database and retreive it from there. You don't need to save it in a state. (New to react,redux. This was just my point of view)
What is redux for if I use a database for my react app?
10.9k views Asked by Roland AtThere are 4 answers
Redux is a state management tool. Redux is for client state, by default it's in-memory only. It is not a 1:1 mapping to your database data but for your views to dispatch actions and then update the store state so other views can react to those data changes. With Redux, the state of your application is kept in a store and each component can access any state that it needs from this store.
talking to database every time is a php kind of thinking, which puts lots of load on the server with huge number of requests... slowing down everything.
with redux you create a mini store cart & fetch necessary data from database for immediate use and keep all of them with the user and remove the requests to the server for those items.
you need to use database not every time but only when needed... to render the app faster and use less resources.
Database and state management tools such as Redux have different concerns (although they manipulate the same thing: data).
When a client uses your app, it will first retrieve data from the database. At that point, that data needs to be held in memory in order to display it.
You can decide to use the React Component internal state which is component-scoped. Now, this is perfectly fine if you plan on using the data you just retrieved inside the same component.
As your app gets more complex, you'll sometimes need to use the data in different points throughout your app (e.g. if you retrieve the user info, you'll probably need to display it in the header, in the profile page, etc).
This can be tricky to do using the React Component internal state as (if you've tried React a bit) you know passing data is done by passing props down children components.
The common solution when you need to share data between different components is to lift the state up in your app, so you can pass it down to the different components that need it.
This can be tedious and prone to errors as your app grows.
Redux is the solution that addresses that concern. It helps keeping the state you share throughout your app clear and clean by creating a global state that can be accessible anywhere in your application (among other things).