useReducer + useFetch

custom-hook/src/App.js

@@ -3,7 +3,7 @@ import useFetch from "./hook/useFetch";
 
 function App() {
   const { error, loading, data } = useFetch(
-    "https://jsonplaceholder.typicode.com/ussdsers"
+    "https://jsonplaceholder.typicode.com/users"
   );
 
   return (

custom-hook/src/hook/useFetch.js

@@ -1,29 +1,50 @@
-import { useEffect, useState } from "react";
+import { useEffect, useReducer } from "react";
 import axios from "axios";
 
+const initialSatate = {
+  error: null,
+  data: null,
+  loading: false,
+};
+
+const actions = {
+  fetchRequest: "FETCH_DATA_REQUEST",
+  fetchSuccess: "FETCH_DATA_SUCCESS",
+  fetchFailure: "FETCH_DATA_FAILURE",
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case actions.fetchRequest: {
+      return { ...state, loading: true, error: null, data: null };
+    }
+    case actions.fetchSuccess: {
+      return { ...state, loading: false, error: null, data: action.payload };
+    }
+    case actions.fetchFailure: {
+      return { ...state, loading: false, error: action.payload, data: null };
+    }
+    default:
+      return state;
+  }
+}
+
 const useFetch = (url) => {
-  const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState(null);
+  const [state, dispatch] = useReducer(reducer, initialSatate);
 
   useEffect(() => {
-    setLoading(true);
-    setData(null);
-    setError(null);
-
+    dispatch({ type: actions.fetchRequest });
     axios
       .get(url)
       .then((res) => {
-        setLoading(false);
-        setData(res.data);
+        dispatch({ type: actions.fetchSuccess, payload: res.data });
       })
       .catch((err) => {
-        setLoading(false);
-        setError(err.message);
+        dispatch({ type: actions.fetchFailure, payload: err.message });
       });
   }, [url]);
 
-  return { loading, error, data };
+  return state;
 };
 
 export default useFetch;