ساخت هوک برای fetch داده از سرور

در این مقاله میخام بهت بگم جریان ساخت یک هوک به چه شکل پیش میره تا دید خوبی داشته باشی برای ساخت هوک های خودت.

یک اپلیکیشن کوچیک مینویسم که از jsonplaceholder دیتا رو میگیره.

پس مینویسم

const [ data, setData ] = useState([]);

useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setData(data);
    } catch(e) {
    }
  }
  fetchData();
}, []);

از هوک useEffect استفاده میکنم و دیتایی که از سرور میاد رو داخل متغیر data ذخیره میکنم.

متغیر loading رو میخام اضافه کنم که روند گرفتن دیتا رو بهم نشون بده.

پس مینویسم

const [ loading, setLoading ] = useState(false);
const [ data, setData ] = useState([]);

useEffect(() => {   
  async function fetchData() {     
    try {      
    setLoading(true); 
    const response = await fetch('https://jsonplaceholder.typicode.com/users');       
    const data = await response.json();
    setLoading(false);       
    setData(data);     
    } catch(e) {
      setLoading(false);
    }   
  }   
  fetchData(); 
}, []);

خب حالا من ده ها کامپوننت دارم که میخان از سرور دیتا بگیرن برای تک تک این کامپوننت ها باید این روند رو تکرار کنم که منطقی نیست.

پس میتونم این کد رو داخل یک فانکشن بنویسم که ترجیحا اسمش با use شروع بشه که بهش میگن هوک. و پارامتری که میخام رو بهش پاس بدم و متغیرهایی که میخام رو ازش بگیرم. اینجا تفاوت هر هوک در روتی هست که بهش درخواست میدم پس url رو بعنوان آرگومان این فانکشن انتخاب میکنم و از هر هوک data و loading رو میخام.

پس مینویسم

function useFetch(url) {
  const [ loading, setLoading ] = useState(false);
  const [ data, setData ] = useState([]);

  useEffect(() => {      
    async function fetchData() {          
      try {           
        setLoading(true);      
        const response = await fetch(url);            
        const data = await response.json();     
        setLoading(false);            
        setData(data);          
      } catch(e) {       
        setLoading(false);    
      }      
    }      
    fetchData();  
  }, []);

  return { loading, data };
}

اگه بخوام خطا رو بگیرم میتونم متغیر error هم اضافه کنم بنابراین برای ساده سازی این روند بجای هوک useState از هوک useReducer استفاده میکنم و براش state اولیه تعریف میکنم که با اکشن های متفاوت تغییر میکنه و در انتها state رو از فانکشن برمیگردونم.

پس مینویسم

const initialState = {
  loading: false,
  error: null,
  data: []
}

function useFetch(url) {
  const [ state, dispatch ] = useReducer((state, action) => {
    switch(action.type) {
    case 'FETCHING':
      return { ...state, loading: true };
    case 'FETCHED':
      return { ...state, loading: false, data: action.payload };
    case 'ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
    }
  }, initialState);

  useEffect(() => {           
    async function fetchData() {          
      try {                
        dispatch({ type: 'FETCHING' });     
        const response = await fetch(url);            
        const data = await response.json();     
        dispatch({ type: 'FETCHED', payload: data });    
      } catch(e) {         
        dispatch({ type: 'ERROR', payload: e.message });     
      }       
    }         
    fetchData(); 
  }, [url]);

  return { state };
}

خب اگه بخوام در هر کامپوننت از این هوک استفاده کنم مینویسم

const { state } = useFetch('https://jsonplaceholder.typicode.com/users');

بعدش با آبجکت state هر کاری بخوام انجام میدم.