Using Hooks in React-Redux
The last few weeks, I’ve been taking some time to do a refresher on Redux within the confines of React. Even though I bad been introduced to Redux, it’s not a topic that really stuck with me. So, I wanted to brush up on it.
What is it?
Redux is a state management tool that can be used in JavaScript apps. It can be implemented in a number of popular JS UI Frameworks like Vue, Angular, and React. For this article, I’ll be referencing the use of Redux in React.
The benefit of using Redux is centralization and predictability. In “vanilla” React, state is passed between components using props. Using Redux, state is located in a store that can be accessed by any component. Since state flows down, this eliminates needing to store state really high up in your component tree in order for it to reach the proper child component. It also aligns with a major programming paradigm, Single Source of Truth.
Do all apps need Redux? No. In fact, Dan Abramov, co-author of Redux, has an article discussing this very topic. In essence, Redux is very useful for large applications, but given the amount of boilerplate and code needed, might not be the best option for smaller apps.
For this example, I’ll demonstrate a very easy counter app that wouldn’t necessarily need Redux.
Let’s Get Started
Any Redux application will have three essential things: reducers, dispatches, and a store. Reducers calculate state, dispatches update state, and the store is where everything lives, our Single Source of Truth.
Reducer
My reducer is setting initial state to zero and saying, “Depending on which type of action is dispatched, do this specific action to state”. In this example, increase or decrease the state by one.
Dispatch
My dispatch functions then look like this, returning a type of action. These action types will then trigger the reducer to change and return the state.
Store
To create the store, in our top level index.js file, we import a few things from the Redux and React-Redux libraries. We create a store variable, and assign that to be equal to our reducer using the imported createStore function. We then establish the store within the Provider and use that to enclose our App. This way, our entire app has access to the store.
Let’s Use It
Typically, to access the store in each component, we’d have to use functions such as mapStateToProps or mapDispatchToProps and connect those to the component. However, since we’re using React, we have access to hooks! Hooks can be used for Redux too!
Hooks
In order to do that, we need to import the useSelector and useDispatch, as well as our dispatch functions from above.
Awesome. Now, lets create some variables we’ll use in our app. We’ll create a variable counter, that’s equal to the counter state, and dispatch will be equal to our useDispatch function.
To use them, we simply implement the variables and our dispatch functions in our code. And, it’s that easy!
Depending on which button is clicked, a different action type will be dispatched, and state will be changed accordingly and dynamically updated on our screen.
Summing It Up
This is a very high level glance at React Redux and React Redux using hooks. I was unaware you could use hooks in Redux until last week! As always, check out the docs, and have fun experimenting. Happy coding!
