완전한 redux 툴킷(부분 -

파트 3: RTK 쿼리 소개

이 부분에서는 RTK 쿼리를 다루겠습니다

1. RTK 쿼리란 무엇인가요?

Redux Toolkit은 상태 및 비동기 논리를 관리하는 강력한 도구를 제공하지만 데이터 가져오기 및 캐싱을 처리하려면 여전히 상당한 상용구 코드가 필요합니다. Redux Toolkit v1.6에 도입된 RTK 쿼리는 최소한의 설정으로 효율적인 데이터 가져오기 및 캐싱을 위한 강력한 도구 세트를 제공하여 이 문제를 해결하는 것을 목표로 합니다.

RTK 쿼리의 주요 기능:

• 데이터 가져오기 및 캐싱: 캐싱, 무효화, 다시 가져오기를 자동으로 처리합니다.
• 낙관적 업데이트 및 실시간 동기화: 낙관적 업데이트 및 실시간 데이터 동기화를 쉽게 관리하세요.
• 선언적이고 간단한 API: 최소한의 상용구 코드를 사용한 직관적인 API 디자인
• Redux Toolkit과 통합: Redux Toolkit을 기반으로 구축되어 원활한 통합이 가능합니다.

2. RTK 쿼리 설정

RTK 쿼리를 시작하려면 데이터를 가져오는 방법과 사용 가능한 엔드포인트를 지정하는 API 서비스를 정의해야 합니다. 간단한 Posts API를 사용하여 예제를 만들어 보겠습니다.

1단계: API 서비스 정의

feature/posts 디렉터리에 postApi.js라는 새 파일을 만듭니다. 이 파일은 게시물을 가져오고 변경하기 위한 API 엔드포인트를 정의합니다.

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Define an API service using RTK Query
export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

// Export hooks for usage in functional components
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

설명:

• createApi: 이 함수는 API 서비스를 정의하는 데 사용됩니다. API 슬라이스를 생성하여 저장소, 리듀서 및 작업을 자동으로 관리합니다.
• baseQuery: API의 기본 URL을 정의하는 함수입니다. fetchBaseQuery는 표준 가져오기 API를 둘러싼 경량 래퍼입니다.
• 엔드포인트: API의 엔드포인트를 정의하는 함수입니다. 여기서는 데이터 쿼리를 위한 fetchPosts와 새 게시물 생성을 위한 addPost라는 두 개의 엔드포인트를 정의합니다.

2단계: Redux Store에 API 서비스 통합

postApi 감속기를 스토어에 추가하고 미들웨어를 구성하여 캐싱 및 무효화를 활성화합니다.

postApi를 통합하려면 store.js를 업데이트하세요.

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from '../features/posts/postsApi';

const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [postsApi.reducerPath]: postsApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

export default store;

3. 구성요소에서 RTK 쿼리 사용

RTK 쿼리는 API 서비스에 정의된 엔드포인트를 기반으로 사용자 정의 후크를 생성합니다. 이러한 후크는 데이터 가져오기, 변형을 수행하고 캐싱을 자동으로 관리하는 데 사용됩니다.

1단계: useFetchPostsQuery를 사용하여 데이터 가져오기

게시물 목록을 가져오고 표시하는 PostsList.js 구성 요소를 만듭니다.

// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

  return (
    <section>
      <h2 id="Posts">Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">{post.title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostsList;

설명:

• useFetchPostsQuery: fetchPosts 엔드포인트에 대한 RTK 쿼리에 의해 생성된 사용자 정의 후크입니다. 가져온 데이터(data), 로딩 상태(isLoading), 오류 상태(error)가 포함된 객체를 반환합니다.
• 구성 요소는 후크 출력을 기반으로 로드, 오류 또는 데이터 상태를 조건부로 렌더링합니다.

2단계: useAddPostMutation을 사용하여 데이터 추가

addPost 변형을 사용하여 새 게시물을 추가하려면 AddPostForm.js 구성 요소를 생성하세요.

// src/features/posts/AddPostForm.js
import React, { useState } from 'react';
import { useAddPostMutation } from './postsApi';

const AddPostForm = () => {
  const [addPost, { isLoading }] = useAddPostMutation();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (title && content) {
      await addPost({ title, body: content }).unwrap();
      setTitle('');
      setContent('');
    }
  };

  return (
    <section>
      <h2 id="Add-a-New-Post">Add a New Post</h2>
      <form onsubmit="{handleSubmit}">
        <input type="text" value="{title}" onchange="{(e)"> setTitle(e.target.value)}
          placeholder="Post Title"
        />
        <textarea value="{content}" onchange="{(e)"> setContent(e.target.value)}
          placeholder="Post Content"
        />
        <button type="submit" disabled>
          {isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </textarea>
</form>
    </section>
  );
};

export default AddPostForm;

설명:

• useAddPostMutation: addPost 변형에 대한 RTK 쿼리에 의해 생성된 사용자 지정 후크입니다. 변형과 로딩 상태(isLoading)를 트리거하는 함수(addPost)를 제공합니다.
• unwrap(): 요청 후 부작용을 처리하기 위해 변형에서 해결되거나 거부된 페이로드를 풀어낼 수 있습니다.

4. 캐시, 오류 및 낙관적 업데이트 처리

RTK 쿼리는 캐싱, 오류 상태를 자동으로 처리하고 변형이 발생하면 캐시를 무효화합니다. 태그 및 기타 구성을 사용하여 동작을 추가로 사용자 정의할 수 있습니다.

1단계: presentsTags 및 무효화Tags 사용

캐시 무효화에 태그를 사용하도록 postApi를 수정합니다.

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: (result) =>
        result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

설명:

• presentsTags: fetchPosts 쿼리에서 가져온 데이터에 태그를 지정하는 데 사용됩니다. 새로운 데이터가 추가될 때 캐시를 효율적으로 무효화하는 데 도움이 됩니다.
• validatesTags: addPost 변형에서 캐시를 무효화하고 업데이트된 데이터를 다시 가져오는 데 사용됩니다.

5. 결론 및 다음 단계

이 부분에서는 RTK 쿼리를 사용하여 Redux 애플리케이션에서 데이터 가져오기 및 캐싱을 처리하는 방법을 살펴보았습니다. API 서비스 설정, 엔드포인트 정의, 데이터 쿼리 및 변형을 위해 생성된 후크 사용을 다루었습니다. RTK 쿼리는 최소한의 코드로 데이터 가져오기 및 상태 관리를 단순화하여 최신 Redux 애플리케이션을 위한 강력한 도구입니다.

Dalam bahagian seterusnya, kita akan menyelami Topik Lanjutan dalam RTK Query, seperti menyesuaikan pertanyaan, menggunakan baseQuery, mengendalikan pengesahan dan mengoptimumkan prestasi.

Nantikan Bahagian 4: Topik Lanjutan dalam Pertanyaan RTK!

위 내용은 완전한 redux 툴킷(부분 -의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!