With Redux you can completely decouple your state container from your components and can organize all the business logic in actions.
The app state is stored in one store split into a state tree. However it is possible to instantiate as many stores as you wish.
Furthermore your state transitions - called reducers - will be pure and easy to understand and test.
Redux supports middlewares allowing you for example to serialize to localStorage or to the server. So the user can continue working where s/he left.
When to choose Redux over this.state
It depends on the complexity, feature set and patterns of your app.
For example if you are building an app for administrators then it probably has an HTTP request for each page. It is a good choice to load the data on componentDidMount and store that in this.state. Each page can manage its data to be saved on a button click or input editing. Easy to maintain, clear to understand, no unnecessary boilerplate.
But if you build an app with a lot of state that has to be retained after restarting the app it is more suitable to go with Redux. It allows you to maintain and organize reducers, state tree and actions decoupled from your routes, containers and components.
Adam Bene
Founder & CTO @ Bene Studio | Join us!
About Redux
With Redux you can completely decouple your state container from your components and can organize all the business logic in actions.
The app state is stored in one store split into a state tree. However it is possible to instantiate as many stores as you wish.
Furthermore your state transitions - called reducers - will be pure and easy to understand and test.
Redux supports middlewares allowing you for example to serialize to localStorage or to the server. So the user can continue working where s/he left.
When to choose Redux over this.state
It depends on the complexity, feature set and patterns of your app.
For example if you are building an app for administrators then it probably has an HTTP request for each page. It is a good choice to load the data on componentDidMount and store that in this.state. Each page can manage its data to be saved on a button click or input editing. Easy to maintain, clear to understand, no unnecessary boilerplate.
But if you build an app with a lot of state that has to be retained after restarting the app it is more suitable to go with Redux. It allows you to maintain and organize reducers, state tree and actions decoupled from your routes, containers and components.