Building a Redux Store for Class Components and Functional Components

Managing state when building complex React applications can be quite a pain in the neck. In this blog, I will be going through how to setup a Redux store to globally manage the state of your components, and how to connect your components (Classes or Functional) to your Redux store.

What is Redux?

Redux is a predictable state container designed to help you write React applications that behave consistently across client, server, native environments and are easy to test.

Why do we use Redux?

Keeping track of your components states that are being passed down as props to child components can start to get complex once you start dealing with React applications that have over 100 components. Redux solves this issue for us by allowing us to globally store the state we want shared throughout the different components of our React application.

This can be done for both Class and Functional Components and how you connect each component is slightly different from one another and I will be walking you through how to set that up for both.

Building your Redux Store

First things first, we’re going to have to install some dependencies to your React application in order to use Redux.

1. Using npm or yarn run the following commands to install the dependencies.

$ yarn add redux react-redux redux-thunk redux-devtools-extension

2. Create the reducer for the state you want stored within your global state. For this example, I will use a marketReducer I had implemented in my Crypto Trading Simulator v2 project. Link here to learn more about that.

marketReducer.js

3. In our index.js we’re going to add the following imports to the top of the file, create our Redux store, and connect the store to our application using the Provider component we’re importing from the react-redux library.

index.js

createStore

Holds the complete state tree of your app. It takes in the reducer as the first argument, preloaded state as the second, and enhancers as the third.

applyMiddleware

Used to extend Redux with custom functionality. Middleware lets you wrap the store’s dispatch method commonly used to support asynchronous actions.

thunk

A middle ware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises.

composeWithDevTools

Connects our application to the Redux DevTools Extension. This tool allows us to perform time-travel debugging and live editing.

< Provider >

This is a component allows us to store the global state and have it available throughout any of the nested components that need access to the Redux store.

Action Creators

For this example, we’re going to have a single action creator that utilizes axios to send a fetch request to CoinGecko’s remote API and retrieve the top 100 cryptocurrencies in their market. We’re then going to send another dispatch to our reducer and update our global state with the response from the remote API.

actions.js

Connecting our Component to the Redux Store

For this example, we’ll be working with a single child component MarketTable.js nested in our App.js component.

Note: These components will be making use of Material UI

Object Oriented (Classes)

In order to connect our class component to the Redux store, we’re going to import the connect() function from react-redux, map the state we want accessible to the component as props and pass it in as the first argument, pass in our action creators as the second argument as follows:

OO MarketTable.js

Functional

In order to connect our functional component to the Redux store, we’re going to make use of the useSelector() and useDispatch() hooks. These are React Redux custom hooks that allow us to subscribe to the Redux store and dispatch actions.

Functional MarketTable.js

And we are done! Personally, out of the two, I prefer the functional way of implementing my React applications just cause not only are you able to connect your components to the Redux store with one line using the custom hooks, but it makes your code cleaner and more readable. It’s all preference at this point really.

If you want more information about the project that was used as an example here, follow this link to the blog post, and this link to the GitHub repository.