hooks-reducer.js

import React, { useReducer, useEffect, useState } from 'react';

interface ITable {
  id: string;
  players: IPlayer[];
}

interface IPlayer {
  id: string;
  name: string;
}

const initialState = {
  tableId: 'ab1f32d5-9806-4e54-b18a-1f60186e548a',
  players: [],
};

const reducer = (state: any, action: any) => {
  if (action.type === 'fetch') {
    return state;
  } else {
    throw new Error();
  }
};

const App: React.FC = (): JSX.Element => {
  const [{tableId, players}, dispatch] = useReducer(reducer, initialState);
  
  useEffect(() => {
    fetch(`http://localhost:8000/tables/${tableId}`)
      .then(response => response.json())
      .then(json => dispatch({ type: 'fetch', table: json }));
  }, [dispatch]);

  return (
    <>
      <h2>{tableId}</h2>

      <ul>
        {players.map((player: IPlayer) => (
          <li key={player.id}>{player.name}</li>
        ))}
      </ul>
    </>
  );
};

export default App;