diff --git a/src/useDataApiHook-example/index.js b/src/useDataApiHook-example/index.js
index a2665a7..648a8b6 100644
--- a/src/useDataApiHook-example/index.js
+++ b/src/useDataApiHook-example/index.js
@@ -1,112 +1,102 @@
-import React, {
- Fragment,
- useState,
- useEffect,
- useReducer,
-} from 'react';
+import React, { Fragment, useState, useEffect, useReducer } from 'react';
import axios from 'axios';
const 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,
- };
- default:
- throw new Error();
- }
+ 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
+ };
+ default:
+ throw new Error();
+ }
};
-const useDataApi = (initialUrl, initialData) => {
- const [url, setUrl] = useState(initialUrl);
+const useDataApi = (initialData, initialUrl = 'http://hn.algolia.com/api/v1/search?query=redux') => {
+ const [ url, setUrl ] = useState(initialUrl);
- const [state, dispatch] = useReducer(dataFetchReducer, {
- isLoading: false,
- isError: false,
- data: initialData,
- });
+ const [ state, dispatch ] = useReducer(dataFetchReducer, {
+ // passing isLoading and isError property is redundant here
+ data: initialData
+ });
- useEffect(() => {
- let didCancel = false;
+ useEffect(
+ () => {
+ let didCancel = false;
- const fetchData = async () => {
- dispatch({ type: 'FETCH_INIT' });
+ const fetchData = async () => {
+ dispatch({ type: 'FETCH_INIT' });
- try {
- const result = await axios(url);
+ try {
+ const result = await axios(url);
- if (!didCancel) {
- dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
- }
- } catch (error) {
- if (!didCancel) {
- dispatch({ type: 'FETCH_FAILURE' });
- }
- }
- };
+ if (!didCancel) {
+ dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
+ }
+ } catch (error) {
+ if (!didCancel) {
+ dispatch({ type: 'FETCH_FAILURE' });
+ }
+ }
+ };
- fetchData();
+ fetchData();
- return () => {
- didCancel = true;
- };
- }, [url]);
+ return () => {
+ didCancel = true;
+ };
+ },
+ [ url ]
+ );
- return [state, setUrl];
+ return [ state, setUrl ];
};
function App() {
- const [query, setQuery] = useState('redux');
- const [{ data, isLoading, isError }, doFetch] = useDataApi(
- 'http://hn.algolia.com/api/v1/search?query=redux',
- { hits: [] },
- );
-
- return (
-
-
-
- {isError && Something went wrong ...
}
-
- {isLoading ? (
- Loading ...
- ) : (
-
- )}
-
- );
+ const [ query, setQuery ] = useState('redux');
+ // Now our Custom hookAPI resemble more like native hook
+ const [ result, setUrl ] = useDataApi({ hits: [] });
+ const { data, isLoading, isError } = result;
+
+ return (
+
+
+
+ {isError && Something went wrong ...
}
+
+ {isLoading ? (
+ Loading ...
+ ) : (
+
+ )}
+
+ );
}
export default App;