Redux State Management 📦
My final project at Flatiron involved working with React and Redux on the front end. At first glance, Redux seemed to be confusing but I got to grips with it quite quick and what a great tool it is!
What is Redux? 🤔
When building a large React application, state can become more spread out between various components. We will soon start to see a web of props and state that becomes harder to see how components are handling and sharing data with each other.
One thing we can do is store our state in a high-level container component or parent component but this also creates problems. Soon, we will realise the increase in complexity of props with this approach. This is where Redux comes to the rescue!
Redux allows us to store all of the necessary data in our application in a JavaScript object that is independent to our components. Since Redux state is separate from the component tree, we can grab any part of this data for any component that needs it, just by connecting the component!
In other words, Redux is a state management tool that allows us to access data from anywhere in our application without having to pass down state and/or props from one component to another.
Grab Me That State 👐🏼
In order to make the state available for our components, we wrap the component tree. This gives us access to Redux functions that allow us to grab state and map it the props being given to a component.
With Redux complex interactions are structured with ease. Every component we allow can get and update state data regardless of the position of components in a tree.
State Updating 🔄
When we want to update data, we must send an action, which is a set of strict instructions we create that Redux will use for updating the data.
For example, imagine that after a user fills out a form and clicks submit, we create an action that tells Redux how to incorporate the update into the state. Now, for any time we update the state in Redux, we must create an action first which is just a plain old JavaScript object. We can use these actions to maintain and update our Redux state. These state changes trigger React’s component lifecycle, and thus, the cycle of data is made.
Less Is More Said Dr. Reducer 🧑🏽⚕️
Reducers are functions that take the current state and an action as arguments, and return a new state result. Redux relies heavily on reducer functions that take the previous state and an action in order to execute the next state.
Here is a number counter below to have a better understanding of using reducers to update state:
const increaseAction = {
type: 'INCREASE',
}; const decreaseAction = {
type: 'DECREASE'
};
const countReducer = (state = 0, action) => {
switch(action.type){
case INCREASE:
return state + 1; case DECREASE :
return state -1; default:
return state; }
};
In order for the reducer to determine what the state is updated to, we use the actions increaseAction and decreaseAction. Next, we have a reducer function called countReducer, which takes in an action and an initial state whose value is 0. If the value of action.type is INCREASE, we return a new state that is incremented by 1, else a new state that is decremented by 1 is returned if the value of action.type is DECREASE. In cases where none of those conditions are meant, we just return state.
I hope this short blog on Redux helps you understand why this tool is great for large and complex React applications and you make use of it where necessary!
