Learn React Hooks

Using Hooks for the TodoFilter component

Finally, we are going to implement both the Selector and Dispatch Hooks in the TodoFilter component, because we need to highlight the current filter (state from the Selector Hook) and dispatch an action to change the filter (the Dispatch Hook).

Let's implement Hooks for the TodoFilter component now:

1. First, delete the src/containers/ConnectedTodoFilter.js file.
2. We can also delete the src/containers/ folder, as it is empty now.
3. Now, edit the src/components/TodoFilter.js file, and import the useSelector and useDispatch Hooks from react-redux:

import { useSelector, useDispatch } from 'react-redux'

4. Additionally, import the filterTodos action creator:

import { filterTodos } from '../actions'

5. Now, we ...