8. Tạo reducer productList, productList 2 (ok)

C:\Users\Administrator\Desktop\typescript\src\pages\Product\ProductList\index.tsx

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import MainLayout from './../../../layouts/MainLayout';
import { TableContainer } from './ProductList.styles';
import { getProductList } from './../../../middlewares/thunks';
import * as interfaces from './../../../interface';
import { handlePrice } from './../../../helpers/string';
interface ReduxProps {
  productList: interfaces.Product[]
  getProductList(): Promise<interfaces.ResGetProduct>
}
interface Props extends ReduxProps {}
const ProductList = (props: Props) => {
	const { getProductList, productList } = props;
	useEffect(() => {
    getProductList()
  }, [getProductList])
  return (
    <MainLayout>
      <h2>Product List</h2>
      <TableContainer>
        <table className="table table-striped">
				  <thead>
				    <tr>
				      <th>#</th>
				      <th>Name</th>
				      <th>Quantity</th>
				      <th>Price</th>
				      <th>Actions</th>
				    </tr>
				  </thead>
				  <tbody>
				  	{productList.map((product, index) => (
					    <tr key={product.id}>
					      <th>{index + 1}</th>
					      <td>{product.name}</td>
                <td>{product.quantity}</td>
                <td>{handlePrice(product.price)}</td>
					      <td><a className="btn btn-primary" href="/product/1">Detail</a></td>
					    </tr>
				  	))}
				  </tbody>
				</table>
      </TableContainer>
    </MainLayout>
  )
}
const mapStateToProps = state => ({
  productList: state.productList.productList
})
const mapDispatchToProps = {
  getProductList
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

C:\Users\Administrator\Desktop\React-Folder-Structure-master\src\helpers\string.ts

export const handlePrice = (value: string | number) => Number(value).toLocaleString('en') + ' đ'