Connect a React component to a Redux action
Tags: react, redux, javascript, frontend
Published: 2019-12-20 13:12:12

---
title: Connect a React component to a Redux action
published: true
description: How to use a component to dispatch an action to Redux
tags: react, redux, javascript, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191028-connect.jpeg
---

## How to use a component to dispatch an action to Redux

We have seen that actions and reducers work together to perform some operation in a React/Redux application.
An action instructs a reducer on how to change the state and the reducer performs the actual change and returns the new state of the application.

But we still need something that triggers the action. This something is a component.
Typically, what happens is a chain of events similar to this:

- A user clicks a button.
- The button triggers an event
- The event calls a function inside the component.
- The function calls an action creator
- The action creator dispatches an action to the reducer
- The reducer creates the new application state
- The React system renders the component with the new state

In order for the component to send an action we need to make it aware of the action creator we have set up for that particular action, and the way we do this is through the connect function made available by the React Redux library.

The `connect` function is an higher order function that takes 2 arguments: a function and an object. `connect` returns a function that is called again with the component name.

This is the mechanism that connects the state kept in the Redux store to a component.
Here's the basic structure of the `connect` function:

```js
connect(
  () => {},   // a function
  {}          // an object
)(Component)  // the resulting function is 
              // called with the Component
```

Let's concentrate for now on the *second* argument of the `connect` function, the object.
We said that we need to connect our component to an action creator, so the proper action will be dispatched.
Suppose we want to turn our component title green when a button is pressed. We set up an action creator that dispatches this kind of action:

```js
// actions/index.js

export const turnTitleGreen = () => {
  return {
    type: TURN_TITLE_GREEN
  }
}
```

In order to use this action, we connect it to our `Title` component.
Inside our component, we import the action creator first:

```js
import { turnTitleGreen } from '../actions';
```

Then we import the `connect` function from React Redux:

```js
import { connect } from 'react-redux';
```

At the bottom of the component file we set up the connect function so it uses `turnTitleGreen` inside the object passed as the second parameter. We also pass the `Title` component to the function returned by connect.

```js
export default connect(
  () => {},
  { turnTitleGreen }
)(Title);
```

Now our `turnTitleGreen` action creator is connected to `Title` and we can trigger the action. We can do that with a new function inside the `Title` component.
We will look at how to do in the next article.

---

*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).*