A Short Note - How Redux Works?

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (How Redux Works?).

In this note series, we will understand about the Redux work flow concepts in ReactJS.

So Let’s begin.

Table of Contents

Redux

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 describes the flow in Redux.

(we use This diagram as an 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”.
Anything wants to modify the state should dispatch “Actions” which are a simple JavaScript objects that describe what we want to modify and the new data.
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 always the output is deterministic, and we have deterministic UI.
Time Travelling: Because we change the state through actions which are pure JavaScript objects, which means we can at any moment re-create the state from scratch if we keep a log of those actions, so time-travelling will be a breath.
Logging actions, we can know who modify the state, and when exactly.
Collaborative programs like (google docs) can be achieved 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.

Conclusion

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 to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

You can find Other articles of CoolmonkTechie as below link :

You can also follow official website and tutorials of React as below links :

React Official Website

If you have any comments, questions, or think I missed something, leave them below in the comment box.

Thanks again Reading. HAPPY READING !!???