Redux reducers in a React application
Tags: react, redux, reducer, frontend
Published: 2019-12-17 15:40:59

---
title: Redux reducers in a React application
published: true
description: What a reducer is and how to use it
tags: react, redux, reducer, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191025-redux-provider.jpeg
---

## What a reducer is and how to use it

In our previous article we added Redux to our React application.
We created a Redux store by passing a reducer to the `createStore` function imported from Redux.

We also installed React Redux, which is a library that connects React and Redux and facilitates them working together.

In order to work with Redux we need to make our React application aware of it.
The way we do it is to wrap our whole application with a component called `Provider` that is made available by the `react-redux` library.

We import a `Provider` component from `react-redux`, we pass the store that we have previously created to it via the `store` prop, and finally we wrap the `App` component with it.

```js
// src/index.js

import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'));
```

At this point we have the beginning of a React/Redux application but it's not working yet.
We said that `createStore` takes a *reducer* as an argument. Here's the relevant code again:

```js
const store = createStore(reducer);
```

### What is a reducer?

A reducer is simply a function that changes the application `state` based on an *action*. We will look at actions later, but for now it's enough to say that a reducer takes a `state` object and an `action` as parameters and returns the state that was modified according to the action that was passed in.

Actions can be of different types and can modify the state in different ways. The reducer job is to look at the action type and modify the state accordingly.

We put reducers in a directory called `reducers` inside `src`.
If we have many reducers we can break them down into several files, but for now let's assume that we have only one reducer in a file called `index.js`

At its most simple, a reducer takes the `state`, and returns it unchanged.
Here's an example of what I mean. We have a reducer called `titleReducer` that takes two arguments: `state` and `action`.
This reducer does nothing with the action and returns the state unchanged.

```js
// src/reducers/index.js

const state = {
  title: "Title from the initial Redux store",
}

// the reducer:

const titleReducer = (state, action) => {
  return state;
}
```

But this would be of little use. If we don't change the state, what's the purpose of a reducer?
A more useful reducer will take the `state` and an `action` and return the `state` *changed* based on the action *type*. So, let's modify our reducer to reflect this:

```js
const initialState = {
  title: "Title from the initial Redux store",
}

const titleReducer = (state = initialState, action) => {

  if (action.type === 'UPDATE_TITLE') {
    return { title: "Updated title" }
  }

  return state;
}
```

We made a few changes here that are worthy of some explanation.

We changed the name of the state object to `initialState` to indicate that this is the initial state of the application, and it can be changed as our application runs.

We also modified how the `titleReducer` takes the first argument in. We took advantage of the *default parameters* syntax so the first argument is initialized to the initial state if there is no state object passed in. If the state object is passed in, then the reducer uses that object.

So, the first time the reducer runs, it will take the initial state.
Subsequently the reducer will be called with the current state of the application, that can be different from the initial state.

Inside the reducer we check the action *type*. As we will see, actions are just Javascript objects with a `type` property. The reducer checks the `type` property and if it matches the string `UPDATE_TITLE` it returns the state with a modified title. (`UPDATE_TITLE` is the string that we made up for this example, it could be anything).

If this string is not present, or doesn't match, our reducer returns the state unmodified.

This is a very simple example of a reducer meant to show the basic functionality. Reducers in real life are more complex than this.
We are going to take a look at a real reducer tomorrow.

---

*I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.*

*You can receive articles like this in your inbox by [subscribing to my newsletter](https://cesare.substack.com).*