React Pro - Real World App - Ch8. 01: 01. da useState a useReducer - Parte 2

import { get } from '@/services/products/products.api';
import { useReducer } from 'react';

function productsReducer(state: any, action: any) {
  if (action.type === 'pending') {
    return { pending: true }
  }
  return state;
}


export function CMSProductsPage() {
  const [state, dispatch] = useReducer(productsReducer, { pending: false });

  async function getProductsHandler() {
    dispatch({ type: 'pending', payload: true })
  }

  return (
    <div>
      <h1 className="title">CMS</h1>

      <hr className="my-8"/>

      { state.pending && <div>Loading</div>}

      <button
        className="btn primary"
        onClick={getProductsHandler}>get products</button>

      <pre>{JSON.stringify(state, null, 2)}</pre>

    </div>
  )
}