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.
For detail you can read more on Redux official docs.
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.
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.
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.
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.
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.
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.