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 that tomorrow.
Did you like this article? Share it with your friends.
I write daily about front-end and back-end web technologies.
You can receive all my articles in your inbox by subscribing to my newsletter. Just click the button below. No spam, just good, useful content. Guaranteed!