사용자 정의 React 연결을 사용하여 API 호출 프로세스 처리

React는 현재 유행하는 UI 라이브러리입니다.갈고리가 처음 등장하면서 React 구성 요소는 더욱 깨끗하고 논리적으로 다시 사용할 수 있게 되었다.
React의 일반적인 상황 중 하나는 API 호출을 실행하고 상태를 추적하려고 시도할 때입니다.

전통 방식

그래서 이것은 우리가 API 호출 과정을 처리하는 흔히 볼 수 있는 전통적인 방식이다

import React, { useEffect, useState } from "react";

export const ListUser = () => {
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch("https://randomuser.me/api/?results=500")
      .then((res) => res.json())
      .then((res) => {
        setResults(res.results);
        setError(null);
      })
      .catch((e) => {
        setError(e);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {results.map((item) => (
        <div key={item.id.value}>{item.name.first}</div>
      ))}
    </div>
  );
}

우리는 기본적으로 다음과 같다.

loading: 추출 중인 데이터의 상태를 나타내는 데 사용

results: 응답

으로부터 데이터를 저장한 상태

error: 오류가 발생했을 때 오류가 저장된 상태

이러한 상태가 있으면 우리는 기본적으로 API 호출 과정을 추적할 수 있다.
만약 우리 구성 요소에 더 많은 API 호출이 있다면?일이 엉망이 되다.특정 API에 대해 더 많은 상태가 필요합니다.예:

...

const [loading_1, setLoading_1] = useState(false);
const [results_1, setResults_1] = useState([]);
const [error_1, setError_1] = useState(null);

const [loading_2, setLoading_2] = useState(false);
const [results_2, setResults_2] = useState([]);
const [error_2, setError_2] = useState(null);

...

여기에는 API 호출마다 loading, result, error 상태가 필요합니다.만약 우리가 어떤 방식으로 그것들을 추출하여 필요한 곳에 다시 사용할 수 있다면, 그것은 좋은 일이다.
이곳은 빛나는 곳이다.

사용자 정의 연결

You should definitely checkout the tutorial from the official documentation here

우리는 먼저 맞춤형 연결을 이해해야 한다.밑에 gif 봐요.

그림에서 알 수 있듯이 우리는 매우 간단한 프로그램이 하나 있다. 계산textarea의 단어다.코드는 다음과 같습니다.

import React, { useState, useEffect } from "react";

export const WordCount = () => {
  const [value, setValue] = useState("");
  const [wordCount, setWordCount] = useState(0);

  // use useEffect to automatically recalculate the wordCount whenever the value changed
  useEffect(() => {
    setWordCount(value.trim() ? value.split(" ").length : 0);
  }, [value]);

  return (
    <div>
      <textarea
        style={{ width: "100%", height: 200 }}
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <button onClick={() => setValue("")}>Clear</button>
        <span>Word Count: {wordCount}</span>
      </div>
    </div>
  );
};

만약 우리가 다른 구성 요소의 wordCount 행동을 필요로 한다면?우리는 다른 곳에서 wordCount 논리를 다시 사용할 수 있습니까?
그럼요.🙂. 사용자 정의 연결에 논리 wordCount 를 추출합니다.usewordCount 봐.js 파일:

import { useState, useEffect } from "react";

export const useWordCount = (textValue) => {
  const [count, setCount] = useState(0);

  // update the count state whenever textValue changed
  useEffect(() => {
    setCount(textValue.trim() ? textValue.split(" ").length : 0);
  }, [textValue]);

  return count;
};

지금 우리는 논리를 분리했다.기본적으로 우리는 우리가 원하는 텍스트를 계산할 수 있다.우리 구성 요소로 돌아가서 같은 계산이 필요한 몇 개의 요소를 추가합니다.기존 구성 요소 wordCount 는 다음과 같습니다.

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

export const WordCount = () => {
  const [textAreaValue, setTextAreaValue] = useState("");
  const [inputValue, setInputValue] = useState("");

  // Here is the count value we get from our custom hooks
  const textAreaCount = useWordCount(textAreaValue);
  const inputCount = useWordCount(inputValue);

  return (
    <div>
      <textarea
        style={{ width: "100%", height: 200 }}
        value={textAreaValue}
        onChange={(event) => setTextAreaValue(event.target.value)}
      />
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <button onClick={() => setTextAreaValue("")}>Clear</button>
        <span>Word Count: {textAreaCount}</span>
      </div>
      <div style={{ marginTop: 10 }}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <span>Word Count: {inputCount}</span>
      </div>
    </div>
  );
};

너무 좋아요.결과는 다음과 같습니다.

보시다시피, 우리는 다른 구성 요소에서 사용할 수 있는 더 깨끗한 코드와 다시 사용할 수 있는 갈고리가 있습니다.

API 호출 문제에 대한 사용자 정의 연결

사용자 정의 갈고리를 사용하여 논리적 분리를 하는 아이디어를 바탕으로 저는 npm 패키지를 작성하여 API 호출 과정을 간소화했습니다.전화https://www.npmjs.com/package/react-hook-async로 문의하십시오.

설치

npm i react-hook-async

또는

yarn add react-hook-async

활용단어참조

기본적

기본 장면은 React 구성 요소에서 API 호출을 실행하려는 경우입니다.

import React, {useEffect} from 'react'
import {useAsync} from 'react-hook-async'

const fetchUsers = () =>
    fetch('https://randomuser.me/api/?results=50')
    .then((res) =>
      res.json()
    );

export const ListUser = () => {
  const [apiData, executeFetchUsers] = useAsync([], fetchUsers)

  useEffect(() => {
    executeFetchUsers()
  }, [executeFetchUsers])

  const {loading, result, error} = apiData;

  if (loading) return <div>Loading</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {result.map((item) => (
        <div key={item.id.value}>{item.name.first}</div>
      ))}
    </div>
  );
}

우리는 구성 요소에서 3-4개의 상태를 제거했다. 이것은 매우 멋있지 않습니까?😎
몇 가지 설명:

WordCount 그룹을 반환합니다.

수조의 첫 번째 요소는 API 호출 과정의 모든 상태를 저장하는 대상입니다useAsync,result,error과loading.이것lastFetch이 없으면 로컬 상태로 저장해야 합니다.

반환 수조의 두 번째 요소는 함수로서 실제 API 호출을 실행하는 데 사용된다.

기본적으로 당신은 useAsync 갈고리와 유사한 것을 고려할 수 있습니다. 갈고리도 비슷한 생각을 가진 수조로 되돌아옵니다. 상태 변수와 이 상태를 바꾸는 함수입니다.

useState 매개변수 2개:

첫 번째 매개변수는 useAsync 필드의 기본값입니다.원하는 값을 전달할 수 있습니다.형식 검사를 피하기 위해 빈 그룹을 사용합니다. result 이 그룹인지 아닌지 더 이상 검사할 필요가 없습니다.

두 번째arg는 사실상 약속을 되돌리는 함수이다.약속이 result 연결에서 사용되기 때문에 함수가 약속으로 되돌아갈 것을 확보해야 합니다.

위의 예에서 보듯이 현재 우리는 by useAsync 로 되돌아오는 함수를 사용하여 API 호출을 간단하게 실행할 수 있으며, 내부 상태로 추적할 필요가 없습니다.

전달 매개 변수

좋은 소식은 "execute"함수도 매개 변수를 수신할 수 있고 API 호출 함수에 전달될 것입니다.다음 코드를 살펴보겠습니다.

...
const fetchUsers = (numOfUser) =>
    fetch(`https://randomuser.me/api/?results=${numOfUser}`)
    .then((res) =>
      res.json()
    );

export const ListUser = () => {
  const [apiData, executeFetchUsers] = useAsync([], fetchUsers)

  useEffect(() => {
    executeFetchUsers(50)
  }, [executeFetchUsers])

  const {loading, result, error} = apiData;
  ...
}

이 기능이 있으면 API 호출 함수는 우리가 기대하는 대로 맞춤형으로 만들 수 있다.

링크 API 호출 및 오류 처리

이런 상황에서 우리는 API 호출을 하나하나 실행하거나 호출 과정이 완성되거나 붕괴된 후에 일부 조작을 실행하기를 희망한다.useAsync 함수는 실제로 약속을 되돌려줍니다. 함수를 더 해결하거나 내부에서 발생하는 오류를 처리할 수 있습니다.다른 예를 살펴보겠습니다.

...
const fetchUsers = (numOfUser) =>
    fetch(`https://randomuser.me/api/?results=${numOfUser}`)
    .then((res) =>
      res.json()
    );

const fetchFirstUser = (id) =>
    fetch(`https://randomuser.me/api/?id=${id}`)
    .then((res) =>
      res.json()
    );

export const ListUser = () => {
  const [apiData, executeFetchUsers] = useAsync([], fetchUsers)
  const [firstUserApiData, executeFetchFirstUser] = useAsync(
    [],
    fetchFirstUser
  )

  useEffect(() => {
    executeFetchUsers(50)
      .then(users => executeFetchFirstUser(users[0].id))
      .catch(err => {
        console.log('Something went wrong:', err)
      })
  }, [executeFetchUsers, executeFetchFirstUser])

  const {loading, result, error} = apiData;
  ...
}

결점

지금까지 유일한 문제는 execute 함수를 execute 또는 useEffect deps 그룹에 전달해야 한다는 것입니다. 비록 영원히 변경되지 않을 것이라고 확신하지만.너는 환매 here 를 방문하여 시도해 볼 수 있을 것이다.어떤 PRs도 열렬히 환영합니다.🙂

결론

React 갈고리를 사용하면 사용자 정의 갈고리를 만들 수 있습니다.당신의 코드 라이브러리는 더욱 깨끗하고 읽기 쉬울 것입니다.많은 라이브러리들이 연결을 사용하는 더 간단한 방법으로 업데이트되었다.너는 절대로 가서 보아야 한다.

참조

https://reactjs.org/docs/hooks-intro.html