If you are a .NET developer who has been pushed into the deep-end to learn React like yesterday, this article will be your lifebuoy. Using the concepts that you are already familiar with as a .NET developer, I will try to explain how React and Redux sit together and their full lifecycle. After reading this article, you will be able to follow what your fellow developers are talking about during the Daily Scrum Meeting and not feel left out.
This article is just like the lifebuoy, it is not going to swim you to shore but will keep you from drowning.
What is React?
React is advertised as a JavaScript library for building user interfaces. Let’s examine what that exactly means.
The User Interface is the means by which user and the website interact. The user interface contains elements, such as TextBoxes, Dropdowns, Buttons and Checkboxes, to aid in that user interaction. So in essence, React is a library to build UI elements. That is true, but the elements it allows us to build are sophisticated when we integrate with libraries such as Redux, Thunk and ImmutableJS. It allows us to build elements that are re-usable, can interact with each other, contain nested elements but act as a one coherent whole.
A component’s lifecycle
We will be looking at a component’s lifecycle from a birds eye view, taking Redux and Thunk into account, rather than inspecting the events that a component attached itself to. I’ve created a reference sheet so that you can keep it next to your desk until you get comfortable with the concepts.
Where is Thunk?
Well actually, it is Redux Thunk and it is an extension to Redux. The way Redux receives Actions from Action Creators is by expecting the Action Creator to return a simple KeyValuePair object. This generally works fine until you have the need to return Actions slightly delayed. For example, you can only return the appropriate action after fetching data from an API call.
Thunk extends Redux by allowing Action Creators to return a function rather than an object. By having a function, we are free to write any code we want as long as the function at some point in time returns an Action object. Thunk allows this by injecting a dispatch() method into the Action Creator, which receives a function as its argument.
Rajeev's Curiosity 