Redux behind the scene
One of the most common interview questions is how Redux is working with React on the Frontend side. In this post, I will try to illustrate how Redux is working and how you can identify which React component should be promoted to be a container easily. Also, I will walk you through how to write the Redux store from scratch. So, let’s start.
Pre-requisites:
This post assumes that you are comfortable with the JSX syntax, and have intermediate skills in React.
Why are we using React?
With the front-end world changing on a daily basis, it’s hard to devote time to learning a new framework — especially when that framework could ultimately become a dead end. So, if you’re looking for the next best thing, but you’re feeling a little bit lost in the framework jungle, I suggest checking out React. React is Simple, easy to learn, testable — you can easily write tests for the ReactJs, reusable components, and many other cool features that make you tend to use it.
What is Redux?
According to the Redux documentation, Redux is a predictable state container for JavaScript apps. In simpler words, it means that the browser contents updated without refreshing. This makes our application easy to navigate, high in performance, and light weighted.
What is the relation between React and Redux?
React, and Redux are two libraries that are inherently disconnected. Redux used to construct the application state, however, React provides the views to display that particular piece of state. So, How we can use them together? React, and Redux can be connected only by using a third library called react-redux. The most common way for that connection is by using a function called connect() from the react-redux library.
The most challenging part in redux is to figure out how to design your state.
What is a reducer?
It is a function that returns a piece of the application state. To correctly decide which component should promote to be a container, you have to architect your app first and ask your self, is that component needs a change in state? If “Yes” then this Component will be a container and requires a reducer function to manage its state.
As in the above example, we have different React components; Movies Genre which will expand into a list of movies finally, a detailed view of the selected video from the list.
Both list of movies and the detailed view (currently selected movie) components should promote to be a container — because they require a change in state.
Every promoted container needs a reducer function.
What is the return of the reducer function?
The reducer functions generate the application state; this reducer always returns an array. This array contains a list of objects where each object represents one item.
So, reducers produce the value of the state, and what is important is the value of the key — piece of state.
The Live Cycle of a component with react-redux
I tried to illustrate the complete cycle of a component using visual drawing to easy for you to remember and understand.
In the above illustration, notice that the action creator returns an action which is an object (yes it is a promise!!). Dealing with promises is hard, that’s why we tend to use middleware, like for example Redux-thunk.
What is Middleware?
The middleware is a function that takes action and depending on the action type and payload the middleware can choose to let the action pass through or not. It can also manipulate the action, console-log it, or even stop it. It can do all of these behaviors before they reach any reducers.
Middleware can modify actions.
Middleware job
Because of the request assigned to be the payload property, the redux middleware will automatically resolve this request whenever it sees this action come across. So we will deal with standard data types, not promises which makes our life more comfortable.
So, middleware acts like a doorkeeper! If it has a promise, it will stop the action until the promise resolved then pass through the reducer who cares about the incoming data. Otherwise, it will let it go to the desired reducer.
Installing middleware and some boiler plates
You can use the middleware by installing it as an npm package and passing it through the createStore function as an argument — Please see this example.
I wrote some comments that demonstrate the steps of how to apply the middleware function.
Conclusion
As usual, once I got a good understanding of something new, I tried to document it by trying to convey the concept to others. So, all constructive feedbacks are welcome. Finally, I hope that I could describe the theory for you and make it clear to understand. If you liked my post, please follow me here on Medium. You can follow me on twitter @salmaeng. Thanks for reading!!!
This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
