Learn React Hooks

Connecting the TodoFilter component

Next up is the TodoFilter component. Here, we are going to use both mapStateToProps and mapDispatchToProps.

Let's connect the TodoFilter component now:

1. Create a new src/containers/ConnectedTodoFilter.js file.
2. 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'

3. Next, we import the filterTodos action creator and the TodoFilter component:

import { filterTodos } from '../actions'import TodoFilter from '../components/TodoFilter'

4. We use destructuring to get the filter from our state object, and then we return it:

function mapStateToProps (state) { const { filter } = state ...