People.tsx

import _ from "lodash"
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Firestore } from "@google-cloud/firestore";

const firestore = new Firestore();

interface Person extends Entity {
  name: string;
  hairColor: string;
}

export const PeopleComponent = ({ hairColor }: Record<"hairColor", string>) => {
  const dispatch = useDispatch();
  const people = useSelector(state => state.people);
 
  useCollection<Person>(
    () => firestore.collection("people").where("hairColor", "==", hairColor),
    {
      subscribe: () => dispatch({ type: "people/subscribe" }),
      unsubscribe: () => dispatch({ type: "people/unsubscribe" }),
      data: person => dispatch({ type: "people/data", person }),
      error: error => dispatch({ type: "people/error", error })
    },
    [hairColor] // Ensure that we unsubscribe and re-subscribe when the hairColor changes
  );
  
  return (
    <div>
      <h1>People with {hairColor} hair.</h1>
      <ul>
        {_.map(people, person => (
          <li key={person.id}>
            {person.name}
          </li>
        ))}
      </ul>
    </div>
  );
};