introduce reducer

Author: rwieruch

src/useDataApiHook-example/index.js

@@ -1,26 +1,54 @@
-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 [state, dispatch] = useReducer(dataFetchReducer, {
+    isLoading: false,
+    isError: false,
+    data: initialData,
+  });
 
   useEffect(() => {
     const fetchData = async () => {
-      setIsError(false);
-      setIsLoading(true);
+      dispatch({ type: 'FETCH_INIT' });
 
       try {
         const result = await axios(url);
 
-        setData(result.data);
+        dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
       } catch (error) {
-        setIsError(true);
+        dispatch({ type: 'FETCH_FAILURE' });
       }
-
-      setIsLoading(false);
     };
 
     fetchData();
@@ -31,7 +59,7 @@ const useDataApi = (initialUrl, initialData) => {
     event.preventDefault();
   };
 
-  return { data, isLoading, isError, doGet };
+  return { ...state, doGet };
 };
 
 function App() {