Learn React with TypeScript 3

Connecting ProductsPage to the store

The first component we are going to connect to the store is going to be the ProductsPage component.

Let's open up ProductsPage.tsx and start to refactor it:

1. First, let's import the connect function from React Redux:

import { connect } from "react-redux";

We'll use the connect function at the end of this section to connect the ProductsPage component to the store.

2. Let's import the store state type and the getProducts action creator from our store:

import { IApplicationState } from "./Store";import { getProducts } from "./ProductsActions";

3. The ProductPage component won't contain any state now because this will be held in the Redux store. So, let's start by removing the state interface, the static getDerivedStateFromProps ...