Building the Redux App

Redux version: https://bit.dev/geekrajat/dcsuperhero/src/preview

React Context API version: https://github.com/rajatgeekyants/superhero

Getting started with redux requires a certain learning curve, but here’s the gist of what you should know when suing Redux.

The state of the entire app is store in a single object tree within a single store.

To change the state, you need to trigger an action that describes what needs to happen.

You should never mutate the state directly, always return a new object to do so.

Let’s build a simple React App that uses Redux to manage its state.

Project Setup

First, let’s create a React project directory using create-react-app .

$ create-react-app dex

Once the directory is created, we need to install Redux as a dependency.

$ cd dex

$ yarn add redux

To bind Redux with React, we need to add another package called React-Redux as a dependency.

$ yarn add react-redux

With these dependencies installed, we can begin writing our code.

Code

Open the project directory in any code editor. I personally like to use VS Code.

Let’s start with our Redux Store. Store is where we will store our data and update it as someone uses the app. Create a file named reducers.js inside the src folder of your app and write the following inside it. You can also create a separate file named store.js and write the store there, but here I am going to write it in reducers.js .

We will create our Reducer in the same file. Below the Store declaration, write the following code:

Note: The hero.js file contains a long list of DC Superheroes. Here is a minimalistic version of it.

Next, we will write our Actions. In this app, our actions are synchronous. If our actions were asynchronous, we would have to write our actions in a different way. We would have use some more libraries like Redux-Thunk, Redux-Saga, and Redux-Pack to help Redux handle asynchronous functions.

Create a new file named actions.js and write the following code inside it:

With that taken care of, we need to hook our Actions to the App.

This is where React-Redux comes into play. It has a component called Provider that will make our Store available to the rest of the components.

Provider is used at the root level of your app. So, all the child components can have access to the Store without having to write the import statement in every file.

Provider uses the older Context API and an higher order component (HOC) called connect to access different properties and make them available to different child components of the app through props .

Rewrite the index.js file with this code:

We now need to use connect in the child component to access the data and “connect” with the Actions to be able to modify the data.

In your App.js file, replace the export statement with this:

export default connect(store => store, actions)(App);

With this, the connect function will now return a new component that will make the Store and Actions available to App as props .

Since I don’t have any need of internal component state or any lifecycle methods, I will write my App component as a stateless functional component.

This is sufficient for a basic Redux app, but obviously things can get more complicated as we scale our app.

If you now run yarn start or npm start , you should see something like this:

You can look at the entire source code of the Redux version of the app here.