Learn React Hooks

Connecting the AddTodo component

We are now going to start connecting our components to the Redux store. The presentational components can stay the same as before. We only create new components—container components—that wrap the presentational components, and pass certain props to them.

Let's connect the AddTodo component now:

1. Create a new src/containers/ folder for all our container components.
2. Create a new src/containers/ConnectedAddTodo.js file.
3. In this file, we import the connect function from react-redux, and the bindActionCreators function from redux:

import { connect } from 'react-redux'import { bindActionCreators } from 'redux'

4. Next, we import the addTodo action creator and the AddTodo component:

import { addTodo } from '../actions' ...