Redux Wait for Async Action to Fnish - redux

Question

I'm getting TypeError: Cannot read property 'map' of undefined in Products because it is being rendered before the products in store is updated. Therefore I'm mapping an empty array.
My question is - how can I wait for async action (fetchProducts) to finish before rendering Products component?
How fetchProducts work:
In App, fetchProducts grab data from the api; meanwhile state.status is "".
It dispatch(fetchProductsRequest()) and changes state.status to "loading".
Finally if fetching of products is successful, it dispatch(fetchProductsSuccess()) and changes state.status to "success".
Products.js
import React, { Component } from 'react';
import Product from './Product';
const Products = ({ products, addToCart }) => {
console.log(products);
console.log(addToCart);
return (
<div className='img-container'>
{products.map((product, index) => {
let num = index + 1;
return (
<Product key={product.name} image={product.image} name={product.name}
price={product.price} num={num} addToCart={addToCart} />
);
})}
</div>
);
};
ProductsContainer.js
import React from 'react';
import { connect } from 'react-redux';
import AddToCart from '../actions/AddToCart';
import Products from '../components/Products';
const ProductsContainer = ({ products, addToCart }) => {
console.log(products);
return (
<Products products={products} addToCart={addToCart} />
);
}
const mapStateToProps = state => ({
products: state.products
});
const mapDispatchToProps = dispatch => ({
AddToCart: (num, cartItem) => dispatch(AddToCart(num, cartItem))
});
export default connect(mapStateToProps, mapDispatchToProps)(ProductsContainer);
FetchProducts.js
import FetchProductsRequest from './FetchProductsRequest';
import FetchProductsSuccess from './FetchProductsSuccess';
const FetchProducts = () => {
return (dispatch) => {
fetch('/products')
.then(res => res.json())
.then(res => dispatch(FetchProductsSuccess(res)))
.catch(err => console.log(err));
dispatch(FetchProductsRequest());
}
}
export default FetchProducts;

Answer 1

Make ProductsContainer a class component, not functional component
In ProductsContainer in componentDidMount call action.
In render method of the ProductsContainer do something like this.
render(){
if (!this.state.products){
return <div>Loading</div>
}
return (
<Products products={this.state.products} />
);
}