Managing React component state with useReducer

recipes.tsx

  //component state
  const [{ recipes, isLoading, loadingFailed, loadingError }, dispatch] = useReducer(
    createLoadRecipesReducer(), { isLoading: true, loadingFailed: false }
  );
  
  //load data
  useEffect(() => {
    dispatch({ type: "busy" });
    api.getRecipes().then(response => {
        dispatch({ type: "success", result: response.data });
      }).catch((error: string) => {
        dispatch({ type: "error", error });
      });
  }, []);