Redux State Management - Part1
When you start building new website or even mobile application one of the topics that you have to think about it at the beginning of the application is
How I will handle the state in the application ? and How I will make my code scalable and maintainable ? and the question here why we need to think about this topics at the beginning of the application ? because usually the application start as a small app/website then your client or company require new features to grow so even if you will start a small project you have to think about the above questions ☝
This article is the first article from series of articles I want to write it about the state management libraries and how can I use it.
What is the Redux JS ?
Redux is a predictable state container for JavaScript apps.
Redux is a state container for JavaScript applications that will help your applications behave consistently.
Important Note: Many people thought that Redux is used only with ReactJS and this completely wrong because you can use Redux with any Front End application ( Website or Mobile app)
Redux JS Principles
1- Single source of truth
The state of your whole application is stored in an object tree within a single store.
2- State is read-only
The only way to change the state is to emit an action, an object describing what happened.
3- Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.
Redux Pieces
1- Store
- A single JS object that contains the state of the application
- We can think of it as ( local client-side database )
2- Actions
- Plain JS object that represent something that has happened
- We can think of it as ( Events )
3- Reducers
- A function that specifies how the state changes in response to an action
- We can think of it as ( action handler / event handler )
Note: reducer dose [Not] modify the state, It returns the new state and it should be a [Pure] function.
Redux Architecture Diagram
Pure Functions
1- Given the same input, will always return the same output.
2- Produces no side effects.
Benefits Of Pure Functions
1- Easy to test
2- Easy undo/redo
3- Less time in debugging
When we use Redux?
1- In medium or large single page applications
2- For complex data flow and complex views
Redux alternatives
In the upcoming articles I will add code examples of how to use Redux with React and NextJS.
That’s it. Thanks for reading! Any comments would be highly appreciated.
