Как повторно использовать логику извлечения данных из API, используя реагирующие пользовательские хуки - PullRequest
Новая
       1

Как повторно использовать логику извлечения данных из API, используя реагирующие пользовательские хуки

0 голосов
/ 12 июня 2019

У меня есть два компонента, которые отображают разные интерфейсы в зависимости от типа пользователя. Оба компонента имеют почти 50% сходную логику получения данных из API, подключенных к хранилищу.

Я пытался повторно использовать логин, создавая пользовательский хук. 

const { products, loading} = useFetchProducts(userId);

и теперь я могу определить редуктор UseFetchProducts 

  const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(null);

   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
 }

Как вернуть продукты и состояние загрузки в мой компонент из этого редуктора, чтобы скрыть или показать загрузчик, а также показать список продуктов,

Ответы [ 2 ]

2 голосов
/ 12 июня 2019

Вам просто нужно вернуть значения из пользовательского хука.

const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(null);

   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
   return {loading, products}
 }

Это будет работать, потому что когда данные будут доступны, это вызовет повторную визуализацию, и из-за этого компонент, в котором вы используете пользовательскую ловушку, выполнит повторную визуализацию, вызывая обновление

1 голос
/ 12 июня 2019

Вам необходимо вернуть значение из вашего пользовательского хука. 

const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(false);

   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
   return { products, loading }
 }
...