React JS Modular Design with Higher Order Components — Part 2
TLDR: In this article we use React JS’s Higher Order Component design pattern to create components that utilize Redux’s connect method. We will do this by wrapping our components in the connect method which allows them to hook into global app state.
In Part 1 of the two part Higher Order Components, we looked at the theory of HOC’s. We discussed how HOC’s allow us to write more modular components by extending the ability to access data streams and global state to individual components. In this article, we will continue those thoughts as we walk through connect, a Redux method and HOC. This function allows us to convert our components into connected components with the ability to access and update the global app state.
I always learn better through real world implementation, so for this article I have built a simple counter app using Redux. You can find the source code in this link. Though some tools are overkill for their task, and using Redux for something that normal React can easily handle certainly is, using a familiar application will make it easier for us to understand what is happening.
The point of this app is a simple counter with a display, increment, decrement and a reset button. While you could store all the state in a parent App.js file and pass down callbacks to update the state to the buttons, and the currentCount value to the display, we will be using Redux to move all of this logic into a single store.
For anyone unfamiliar with Redux, it is a standalone state management tool that is often used with React to simplify state operations on large applications. Redux is not a great option for every project, however a good rule of thumb for using it is if you are passing props down, or lifting state up more than 2 components, you should consider using Redux.
Redux uses a global store system, but what exactly does this mean? The global store is a single JSON like object that stores all state for the app and is directly accessible and updateable by any component in your app. How do we access, or connect our apps to this store? This is where Higher Order Components come in.
As I mentioned before, Redux is a standalone application so to be able to use it with React, we need both the redux and react-redux npm packages. These will give us access to the methods we need to create a store, combine reducers and dispatch actions as well as let us connect our components to the store.
The Higher Order Component that we will be using to connect our components to the store is the connect method from the react-redux package. This method is a higher order function, first taking in two arguments, mapStateToProps and mapDispatchToProps as its first set and the component to connect as the second set of arguments.
Without getting too deep into Redux, the two things we are interested in with this app are retrieving state from the store, and updating the store from events, or dispatching action creators to the store. These are both made possible through the connect function.
Redux offers all the individual methods to create the same functionality as the connect method offers, but offers an easier way to extend access to the store to all of our components. It is through this access that we avoid writing redundant logic for accessing and updating the store, and keep our code DRY. Below we will look at the two objects that we pass into the connect HOC function that allow our app to read and update global app state.
Reading State
The first argument of our first set in the connect method is an object that tells redux what key value pairs from our global state object that we want to make available to our connected object as props. Again, the connect HOC is very helpful in doing this as we don’t have to rewrite the code for every component, or even know what parts of the global store we want ahead of time.
As you can see in the code snipped above, we are grabbing the currentCount part of our global store and using ES6 to destructure the props object for cleaner access to the value. This is the value that is fed in as JSX to our display and now shows up on our screen. Great, let’s move on to making it possible to update the counter’s value.
Updating State
The second argument of our first set for the connect method is an object that tells redux which action creators to dispatch to the store. The only way to update the store is to dispatch an action object to the store for the reducers to update the state. While there is a redux dispatch method to do this, by creating a mapDispatchToProps object, we can pass in functions that create the action objects and dispatch these action objects to the store.
Above I have put a screen shot the increment component. We import the action creator that we want to use and pass it as a key value pair to the mapDispatchToProps object. By doing this, we are able to call this method as props in our onClick event handler, thus dispatching an object with type “INCREMENT” to our reducers which in turn increments the current count by 1.
Today we have seen a practical use of the connect HOC method. By using this method, we were able to extend the functionality of being able to read and write from global state to all of our components. This ability to share common access to global state was done through Higher Order Components and not only makes our code less redundant and more readable, but also saves us time!
