A Short Note – How Redux Works?

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.

How Redux Works?

So Let’s begin.

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

(This diagram is used as educational and information purpose).

Redux Work Flow
Redux Work Flow

This is the data flow:

  1. 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.
  2. Communication to the store should happen through one gate, which is a function called “dispatch”.
  3. 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.
  4. 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.
  5. Store’s state is immutable, and any modification will generate always a new state.
  6. The Store will notify any subscribers about new changes.
  7. UI render itself, using pure functions taking the store’s state as input parameter.
  8. 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.
  • 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 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.

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 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 !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s