Connect a React component to a Redux action

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:

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:

// 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:

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

Then we import the connect function from React Redux:

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.

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.

Comments

[highasthedn]

Maybe you should give hooks a try. You don't have to connect your component via the HOC provided by redux, much cleaner code in my opinion.

[ygorbunkov]

I think, those are two different tools to solve two different tasks. Hooks perfectly suit when you need to manipulate the local state of the component. If you need to update the global state of the app within Redux store, the whole idea of unidirectional data flow is to use actions dispatched to reducer, exclusively. That's where (described above)mapDispatchToProps and connect come in to play. Or am I missing something?

[highasthedn]

With hooks it's also possible to update the global state. Therefore react-redux offers useSelector() to get the store data into your component and useDispatch() for dispatching actions. Those functions are a different approach to the connect and mapDispatchToProps code structure.

[Cesare Ferrari]

You are right, I will write about hooks in the future.