React 프로젝트: 인증이 있는 게시물의 해시태그 — 파트 #3

3부입니다. 이 블로그 게시물은 반응 쿼리를 사용하여 데이터를 가져오는 방법을 설명합니다.

React Query의 기본 사항 및 시작 방법에 대해 전혀 모르는 경우 link을 참조할 수 있습니다.

부품 시리즈에 대한 빠른 링크:

1 부 -
2 부 -
파트 #3 - Redux thunk 대신 원격 데이터 가져오기를 위한 React Query(이 게시물)
파트 #4 -
파트 #5 - styled-component의 고급 사용에 대한 기본 사항

어떤 단계에서든 막히면 Github repo을 참조하십시오.

완료된 프로젝트를 찾으려면 Demo link

자, 먼저 먼저. Redux 대신 React Query가 필요한 이유와 Redux의 문제점은 무엇입니까?

많은 프로젝트에서 데이터 가져오기를 처리하기 위해 Redux를 사용하고 있지만 React JS로 동일한 작업을 수행하는 더 좋은 방법이 있어야 한다고 항상 믿었습니다.

가져오기 작업을 할 때마다 개발자는 다음을 생성해야 합니다.

세 가지 작업(요청 가져오기, 성공, 실패)

3개의 감속기(요청 가져오기, 성공, 실패)

하나의 미들웨어(일반적으로 redux-saga 또는 redux-thunk)

이 모든 코드를 작성하려면 간단한 API 호출의 경우에도 많은 시간이 걸립니다. 또한 큰 JS 번들로 끝나는 것이 어렵지 않습니다.

Redux 스토어 개요

Redux가 수행하는 모든 가져오기 작업은 Redux 스토어에 로딩 및 응답 상태를 저장해야 합니다. 그러나 대부분의 경우 해당 작업을 수행하는 구성 요소는 다른 구성 요소와 데이터를 공유할 필요가 없습니다. 결과적으로 Redux Store에 저장할 필요가 없습니다.

일반적인 Redux Flow를 검토해 보겠습니다.

단순한 가져오기를 위한 긴 과정이죠?

Redux를 포함하지 않고 높은 수준의 관점에서 모든 것을 다시 생각하기 위해 한 걸음 뒤로 물러나고 싶습니다. 기본 아이디어는 다음과 같습니다.

구성 요소에서 가져오기 작업을 수행하고 응답을 기다립니다

.

응답을 받으면 구성 요소의 로컬 상태를 업데이트합니다

.

선택적으로 Redux 스토어에 응답(또는 그 일부)을 저장해야 하는 경우 전용 작업을 발송하여 저장할 수 있습니다

.

React Hooks 덕분에 가져오기 작업을 사용자 지정 및 재사용 가능한 useFetch 후크로 추상화할 수 있습니다.

import axios from "axios";
import toast from "react-hot-toast";

import ErrorHandleResponses from "../../api-repositories/error-handler";
const REACT_APP_DUMMY_API_ENDPOINT = "https://dummyapi.io/data/api/";

axios.defaults.headers["app-id"] = "lTE5abbDxdjGplutvTuc";

export const getAuthors = async () => {
  try {
    const url = `${REACT_APP_DUMMY_API_ENDPOINT}user?limit=30`;
    const { data } = await axios.get(url);
    return data || [];
  } catch (err) {
    const errorCode = ErrorHandleResponses(err.response);
    if (errorCode.error) {
      toast.error(`${errorCode.error} Http Error code`);
    }
    return errorCode;
  }
};

export const getAuthorPosts = async (userId) => {
  const { data } = await axios.get(
    `${REACT_APP_DUMMY_API_ENDPOINT}user/${userId}/post?limit=10`
  );
  return data;
};

export const getAuthorDetail = async (userId) => {
  const { data } = await axios.get(
    `${REACT_APP_DUMMY_API_ENDPOINT}user/${userId}/`
  );
  return data;
};

이 접근 방식을 사용하면 Redux에서 가져오기 작업에 대한 정보를 저장할 필요가 없습니다. 공유할 필요가 있는 경우 어쨌든 최종 결과(또는 그 일부)를 저장할 수 있습니다.

import React, { useEffect, lazy } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { useAuthors } from './authors-hooks';
import { authorSelector, authorsReceived } from './author-slice';

const AuthorListing = () => {

  const { authors, filters: authorFilter } = useSelector(authorSelector);
  const dispatch = useDispatch();

  const { data, isFetching } = useAuthors();
  const renderStatus = data && data.data;

  useEffect(() => {
    if (renderStatus) {
      dispatch(authorsReceived(data.data));
    }
  }, [renderStatus]); 
};

AuthorListing.displayName = 'AuthorsListing';
export default AuthorListing;

이 솔루션은 더 간단하지만 분명히 충분하지 않습니다. 우려 사항의 분리가 없으며 많은 코드 중복, 구성 요소 내의 장황한 논리 등이 있습니다.

Hooks 및 React Query의 "마법"덕분에 간단하고 깔끔합니다.

React Query makes fetching, caching, synchronizing, and updating the server state in your React applications a breeze.

팁 & 트릭

구성 요소 내에서 useQuery를 사용하지 마십시오. 대신 사용자 지정 후크로 래핑합니다.

계속하려면