state-reducer-consumer.js

<ProductSearchFilter
  products={["t-shirt", "shorts", "jeans"]}
  colors={["red", "white", "black"]}
  onSearch={(...args) => console.log(args)}
  reducer={(state, action) => {
    // 1. Run the default reducer:
    const newState = productSearchFilterReducer(state, action);
    // 2. Override its behaviour to fit your needs as a consumer:
    if (
      newState.product === "t-shirt" &&
      newState.colors.includes("black")
    ) {
      newState.colors.push("midnight blue");
    } else {
      newState.colors = newState.colors.filter(
        (c) => c !== "midnight blue"
      );
    }
    // 3. Return updated state:
    return newState;
  }}
/>