Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.
In this note series, we will understand about the Redux work flow concepts in ReactJS.
So Let’s begin.
Redux is just one variation of a whole trend in UI architecture called :
Unidirectional User Interface Architecture.
For example there is Flux (Redux is just a variation of Flux), Cycle.js, MobX, and Elm has its own implementation of that architecture.
As stated from the Redux motivation, Redux tries to make: “state mutation predictable”, and it tries to achieve that by the following:
- Have one single source of truth (from the state)
- States are read only and immutable.
- Changes are made with pure functions.
Redux Work Flow
There is a wonderful diagram that describe the flow in Redux.
(This diagram is used as educational and information purpose).
This is the data flow:
- Models/states in the application should reside in a container called “Store”. Even we can have many stores in an application, but Redux differs from others (like Flux) by leaning toward one store.
- Communication to the store should happen through one gate, which is a function called “dispatch”.
- The Store receives the actions, and pass it to “Reducers” which are pure functions that modify the store’s state and produce a new state.
- Store’s state is immutable, and any modification will generate always a new state.
- The Store will notify any subscribers about new changes.
- UI render itself, using pure functions taking the store’s state as input parameter.
- Asynchronous network calls will modify the store through actions as everything else.
Why Redux is better ?
Redux solves many problems:
- Because we use pure functions everywhere, so alwas the output is deterministic, and we have deterministic UI.
- Logging actions, we can know who modify the state, and when exactly.
- Collaborative programs like (google docs) can be acheived easily by sending Actions on the wire and recreate them there.
- Easy debugging, by logging all actions on production we can re-create the whole situation.
- Deterministic UI, because UI rendering using pure function, and the same input will always generate the same output.
- Unit test is so easy, because we are testing pure functions for UI and state mutation.
In this note series, We understood about the Redux Work Flow Concepts in ReactJS. We discussed that how Redux works and why it is better.
Thanks for reading ! I hope you enjoyed and learned about Redux Work Flow Concepts in ReactJS. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!😊😊😊