Merge pull request #7 from the-road-to-learn-react/hooks-improvements

Hooks Data Fetching Improvements

Author: rwieruch

src/useDataApiHook-example/index.js

@@ -1,37 +1,75 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, {
+  Fragment,
+  useState,
+  useEffect,
+  useReducer,
+} from 'react';
 import axios from 'axios';
 
+function dataFetchReducer(state, action) {
+  switch (action.type) {
+    case 'FETCH_INIT':
+      return { ...state, isLoading: true, isError: false };
+    case 'FETCH_SUCCESS':
+      return {
+        ...state,
+        isLoading: false,
+        isError: false,
+        data: action.payload,
+      };
+    case 'FETCH_FAILURE':
+      return {
+        ...state,
+        isLoading: false,
+        isError: true,
+        data: { hits: [] },
+      };
+    default:
+      throw new Error();
+  }
+}
+
 const useDataApi = (initialUrl, initialData) => {
-  const [data, setData] = useState(initialData);
   const [url, setUrl] = useState(initialUrl);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
 
-  const fetchData = async () => {
-    setIsError(false);
-    setIsLoading(true);
+  const [state, dispatch] = useReducer(dataFetchReducer, {
+    isLoading: false,
+    isError: false,
+    data: initialData,
+  });
 
-    try {
-      const result = await axios(url);
+  useEffect(() => {
+    let didCancel = false;
 
-      setData(result.data);
-    } catch (error) {
-      setIsError(true);
-    }
+    const fetchData = async () => {
+      dispatch({ type: 'FETCH_INIT' });
 
-    setIsLoading(false);
-  };
+      try {
+        const result = await axios(url);
+
+        if (!didCancel) {
+          dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
+        }
+      } catch (error) {
+        if (!didCancel) {
+          dispatch({ type: 'FETCH_FAILURE' });
+        }
+      }
+    };
 
-  useEffect(() => {
     fetchData();
+
+    return () => {
+      didCancel = true;
+    };
   }, [url]);
 
   const doGet = (event, url) => {
     setUrl(url);
     event.preventDefault();
   };
 
-  return { data, isLoading, isError, doGet };
+  return { ...state, doGet };
 };
 
 function App() {