React & TypeScript: How to use Context API and useReducer with Firestore Database?

import React, { createContext, useReducer, Reducer, useEffect } from 'react';
import { db } from './firebase';

// Create a context for the products
export const ProductsContext = createContext<{
  products: Product[];
  dispatch: React.Dispatch<ProductAction>;
}>({
  products: [],
  dispatch: () => {},
});

// Define the types for the state and actions
type Product = {
  id: string;
  name: string;
  price: number;
};

type ProductAction =
  | { type: 'ADD'; product: Product }
  | { type: 'DELETE'; id: string }
  | { type: 'UPDATE'; id: string; product: Product }
  | { type: 'SET'; products: Product[] };

// Define the reducer function
const productsReducer: Reducer<Product[], ProductAction> = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [...state, action.product];
    case 'DELETE':
      return state.filter((product) => product.id !== action.id);
    case 'UPDATE':
      return state.map((product) =>
        product.id === action.id ? action.product : product
      );
    case 'SET':
      return action.products;
    default:
      return state;
  }
};

// Create a provider component for the products context
const ProductsProvider: React.FC = ({ children }) => {
  const [products, dispatch] = useReducer(productsReducer, []);

  // Load the products from the Firestore database when the component mounts
  useEffect(() => {
    const unsubscribe = db.collection('products').onSnapshot((snapshot) => {
      const products: Product[] = [];
      snapshot.forEach((doc) => {
        products.push({ id: doc.id, ...doc.data() });
      });
      dispatch({ type: 'SET', products });
    });

    // Unsubscribe from the snapshot listener when the component unmounts
    return () => unsubscribe();
  }, []);

  // Return the products context provider with the current state and dispatch function
  return (
    <ProductsContext.Provider value={{ products, dispatch }}>
      {children}
      ...