Learn React with TypeScript 3

Connecting ProductPage to the store

In this section, we'll connect the ProductPage component to our store:

1. Let's first import the following into ProductPage.tsx:

import { connect } from "react-redux";import { addToBasket } from "./BasketActions";import { getProduct } from "./ProductsActions";import { IApplicationState } from "./Store";

2. We are going to reference the store's getProduct now and not the one from ProductsData.ts. So, let's remove this from this import so that it looks like the following:

import { IProduct } from "./ProductsData";

3. Next, let's move the state into props:

interface IProps extends RouteComponentProps<{ id: string }> {  addToBasket: typeof addToBasket;  getProduct: typeof getProduct;  loading: boolean; product?: ...