How I learnt Redux concepts

So in the past few months there is a lot of fuss going on in Javascript community about React and Redux. Everyone is writing their application in React. At Crowdfire, we had a new product coming up and we had the same question on which framework to pick and which would best be suitable for our needs. […]

So in the past few months there is a lot of fuss going on in Javascript community about React and Redux. Everyone is writing their application in React.

At Crowdfire, we had a new product coming up and we had the same question on which framework to pick and which would best be suitable for our needs.

So we decided to list out the requirements and check which philosophy would solve the problems.

No prizes for guessing which one we went with. We chose React + Redux. Instead of blindly following framework we decided to understand the concept so it would help us understand what is happening under the hood.

Best way to understand a framework is you recreate a basic concept of it yourself. That is what we did.

I am going to talk only about Redux concepts here. Let’s get into the detail.

Three key principles of Redux are :

  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 mutate 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.

For detail you can read more on Redux official docs.

How did we rebuild it:

We rewrote the basic concepts in pure JS.

1. Created a Store which would hold the state of our application.
This is how our store looked. this.state is initialized with initial state.

https://medium.com/media/337e88bc3bf365392bc815a467bbf363/href

2. Created a dispatcher method
This is the only way to change the state of the application. Dispatcher is called along with the action type which indicates how the state has to be changed.

https://medium.com/media/365fa0c99430d8d693131a7059ba16b6/href

3. Created a function which modifies the state based on the action
This method is passed with the action.type and a switch case is used to trigger a state change based on the action.type.

https://medium.com/media/2e3194e8367197c9c10a22222314b734/href

4. Created a method to subscribe for the state change
This method is used when an app needs to listen to the changes happening to the state.

https://medium.com/media/eb1692948976735c85d356cc9a757da1/href

With this we now have basic concepts on Redux implemented.

We can now use any rendering logic to create a UI based on the state of the application and if any user actions needs to change the state, it has to go through dispatcher.

What we learnt

We now have concepts clear on how redux works internally which helps us debug problems easily and predict our application much better.

Thanks for reading, If you liked this article, click “Recommend” or write a response below. You can connect with me on Twitter @narendra_shetty.


How I learnt Redux concepts was originally published in Coding Big — The Crowdfire Engineering Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: Crowdfire