Автоматизировать запросы к API для компонентов CRUD в React? - PullRequest
Новая
       21

Автоматизировать запросы к API для компонентов CRUD в React?

0 голосов
/ 15 января 2020

Название может быть немного запутанным. Я постараюсь объяснить это на примерах. Это мой базовый c реагирующий компонент, отображающий список сообщений, загруженных из API. 

// Rendered by react-router with path='/posts'
const Posts => props => {

  const [posts, setPosts] = useState([])

  const requestHandler = async () => {
    const res = await MyApiClass.get("/posts")
    if (res.code === 200) setPosts(res.data)
    else console.log('Error')
  }

  useEffect(() => requestHandler(), [])

  const mapping = posts.map(post => <p key={post.id}>{post.title}</p>)

  return <div>{mapping}</div>
}

Я повторно использую фрагменты, такие как requestHandler, присваиваю ответ состоянию и запускаю requestHandler после монтирования компонента. Они будут почти идентичны для других ресурсов, таких как пользователи или комментарии. И то же самое касается демонстрации действий для этих активов.

Теперь давайте предположим, что мои маршруты в реакции-маршрутизаторе точно такие же, как в моем Api. Можно ли автоматизировать загрузку этих данных и поставить их состояние или реквизит? Это распространено? Есть ли библиотеки для этого? Это вызовет проблемы? Каковы ваши мнения?

Я немного поигрался с react-router, но ничего не стоило показать. Конечный результат, который я имел в виду, был примерно таким: 

// Rendered by react-router with path='/users'
const Users => props => {
  useEffect(() => {
    props.res.onSuccess = () => console.log('Data received')
    props.res.onError = () => console.log(props.res.code)
  }, [])
  const mapping = props.res.data.map(user => <p key={user.id}>{user.email}</p>)

  return <div>{mapping}</div>
}

1 Ответ

0 голосов
/ 15 января 2020

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

useDataFetching.jsx : 

import React, { useState, useEffect } from "react";
import MyApiClass from "./MyApiClass"

function useDataFetching(dataSource) {
  const [loading, setLoading] = useState(true);
  const [results, setResults] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await MyApiClass.get(dataSource);
        if (res.code === 200) {
            setLoading(false)
            setResults(res.data);
        }
      } catch (error) {
        setLoading(false);
        setError(error.message);
      }

      setLoading(false);
    }

    fetchData();
  }, [dataSource]);

  return {
    error,
    loading,
    results
  };
}

export default useDataFetching;

Затем в свой компонент маршрута импортируйте подключите и используйте его так: 

 const { loading, results, error } = useDataFetching("/posts")
...