From Zero to Redux in 3 Minutes

A simplified guide to using Redux in a React application.

3 min readFeb 14, 2017

For some reason I have a hard time remembering the basic steps required to set up Redux with React. I find the official documentation hard to follow, so I’ve written a simplified guide for the sake of future reference.

Prologue: Create a new React app

If you are adding Redux to an existing React app, skip ahead to Step 1

We’ll start by using create-react-app to generate a simple React web application.

npm install -g create-react-app
create-react-app my-app && cd my-app
npm start

Now open up your project folder in your text editor and you’re ready to go. Your app will open in your browser at http://localhost:3000

Step 1 of 4 — Dependencies

Use Yarn or npm to add two required packages:

yarn add redux react-redux

There are many ways you can organize your app, but I’ll use a very simple method that puts all your Redux-related code in one place. Create a new folder in your src/ directory called store/, and in that folder add three files: index.js, actions.js, and reducers.js.

Here’s a quick bash one-liner that will do this for you:

mkdir ./src/store && touch ./src/store/{index,actions,reducers}.js

Your project structure will now look like this:

my-app/src
       ├── App.css
       ├── App.js
       ├── App.test.js
       ├── index.css
       ├── index.js
       ├── logo.svg
       └── store
           ├── actions.js
           ├── index.js
           └── reducers.js

Step 2 of 4 — Actions

Next, we’re going to define some actions. We’ll use these actions later in our component event handlers to manipulate data in the store. In this somewhat contrived example, I am creating actions to handle toggling the user notification settings in my app.

my-app/src/store/actions.js

Here we’re doing two things. First, defining and exporting a TYPES declaration, which we will use when we handle the action. Second, we’re defining and exporting an actions object, in which we’ve defined a function to pass data along to our reducer.

Step 3 of 4 — Reducers

my-app/src/store/reducers.js

In this file we’ll create and export our reducers. Reducers are used to determine how data in the Redux store is updated.

Step 4 of 4 — Store and <Provider>

my-app/src/store/index.js

Here we import our reducers, combine them into a single “root reducer”, and create our store. The createStore method returns a store object to use with React-Redux’s <Provider> component, in which we’ll wrap our entire application before rendering it to the DOM.

my-app/src/index.js

And that’s it for the setup! Next let’s look at using our Redux store by connecting it to components and dispatching actions.

Epilogue: Connecting Components

Continuing with my contrived example, let’s create a controlled checkbox component. The settings.notifications key in the Redux store will control the state of the component.

my-app/src/components/notifications-switch.js

A couple of noteworthy points:

onChange will dispatch the setNotifications action we created earlier.
mapStateToProps, when passed to connect(), maps keys from the Redux store to props in the component.

Now any connected component will have access to the value that is set by the above component. For example, if we create a component to display the state of the user settings…

my-app/src/components/user-settings.js

…and use these components somewhere in our app…

my-app/src/App.js

…we’ll get: