REACT / REDUX and the all-important lifecycle

While working on this final capstone project, I realized how monumental Redux can be. It’s lifecycle from creating an action, dispatching it to the reducer, and in turn generating a new state is genius. That’s why I would like to dedicate this blog just on diving deeper into the Redux flow.

First and foremost Redux is a state management tool. It allows the user to save the state, for a method to get a state and change the state. Two important things about Redux is that it handles the state through the action and the reducer. The action tells the reducer what it wants to do. From there, the reducer updates the state based upon the type and additional data provided from the action. Using actions and reducers allows for more cleanliness between code and allows for more control. Redux reduces the complexity of the code by having only specific parts be able to update the state.

Let’s start from the top. The action creator returns an action with a type and payload. When an action creator is called, a wrapper function will forward all the arguments and trigger the dispatch() function. Now what is a dispatch function you might ask. Good question. A dispatch function sends an action to the store’s root reducer along with the current state returned by the store to generate the new state. The root reducer takes in two arguments, the current state and the action. After going through all the existing reducers and the matching action, it will determine if a new state needs to be re-rendered. Once it is deemed that the state has changed, the reducer returns the new state. After calling the listener functions, all the components that need the new state will have the new state according to the logics and the React DOM will get updated.

This cycle gets repeated whenever an action creator is called. Management of the state is a very crucial part of any application. When we think about web applications that are big, we should have a state management tool like Redux. By starting your project out with Redux, you don’t have to worry about the state going out of control. With smaller applications, you may be able to get away with not having Redux. But as the project gets bigger and bigger, the state will become a big factor. With the Redux store, all the state can be shared among all the components. The Redux store is the heart of it all. It is the heartbeat of your React app. Without it, your components will not have any state, and not know what to render. Without the heartbeat, you have no application.