RTK 쿼리를 사용한 React Native의 효율적인 데이터 처리

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

// Define the postsApi slice with RTK Query
export const postsApi = createApi({
  // Unique key for the API slice in Redux state
  reducerPath: 'postsApi',

  // Configure base query settings, including the base URL for all requests
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://jsonplaceholder.typicode.com',
  }),

  // Define cache tag types for automatic cache invalidation
  tagTypes: ['Posts'],

  // Define API endpoints (queries and mutations)
  endpoints: (builder) => ({
    // Query to fetch a paginated list of posts
    getPosts: builder.query({
      // URL and parameters for paginated posts
      query: ({ page = 1, limit = 10 }) => `/posts?_page=${page}&_limit=${limit}`,

      // Tagging posts to automatically refresh this cache when needed
      providesTags: (result) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Posts', id })), { type: 'Posts', id: 'LIST' }]
          : [{ type: 'Posts', id: 'LIST' }],
    }),

    // Query to fetch a single post by its ID
    getPostById: builder.query({
      // Define query with post ID in the URL path
      query: (id) => `/posts/${id}`,

      // Tag individual post by ID for selective cache invalidation
      providesTags: (result, error, id) => [{ type: 'Posts', id }],
    }),

    // Mutation to create a new post
    createPost: builder.mutation({
      // Configure the POST request details and payload
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),

      // Invalidate all posts (paginated list) to refresh after creating a post
      invalidatesTags: [{ type: 'Posts', id: 'LIST' }],
    }),

    // Mutation to update an existing post by its ID
    updatePost: builder.mutation({
      // Define the PUT request with post ID and updated data in the payload
      query: ({ id, ...updatedData }) => ({
        url: `/posts/${id}`,
        method: 'PUT',
        body: updatedData,
      }),

      // Invalidate cache for both the updated post and the paginated list
      invalidatesTags: (result, error, { id }) => [
        { type: 'Posts', id },
        { type: 'Posts', id: 'LIST' },
      ],
    }),

    // Mutation to delete a post by its ID
    deletePost: builder.mutation({
      // Define the DELETE request with post ID in the URL path
      query: (id) => ({
        url: `/posts/${id}`,
        method: 'DELETE',
      }),

      // Invalidate cache for the deleted post and the paginated list
      invalidatesTags: (result, error, id) => [
        { type: 'Posts', id },
        { type: 'Posts', id: 'LIST' },
      ],
    }),
  }),
});

// Export generated hooks for each endpoint to use them in components
export const {
  useGetPostsQuery, // Use this when you want data to be fetched automatically as the component mounts or when the query parameters change.
  useLazyGetPostsQuery, // Use this when you need more control over when the query runs, such as in response to a user action (e.g., clicking a button), conditional fetching, or specific events.
  useGetPostByIdQuery,
  useCreatePostMutation,
  useUpdatePostMutation,
  useDeletePostMutation,
} = postsApi;

// src/api/usersApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const usersApi = createApi({
  reducerPath: 'usersApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://dummyjson.com',
    prepareHeaders: (headers, { getState }) => {
      // Get the token from the Redux auth state
      const { token } = getState().auth;

      // If the token exists, set it in the Authorization header
      if (token) {
        headers.set('Authorization', `Bearer ${token}`);
      }

      // Optional: include credentials if needed by the API
      headers.set('credentials', 'include');

      return headers;
    },
  }),
  endpoints: (builder) => ({
    // Fetch user profile with token in Authorization header
    getUserProfile: builder.query({
      query: () => '/auth/me',
    }),
  }),
});

export const { useGetUserProfileQuery } = usersApi;

// src/MainApp.js
import React, { useEffect, useState } from 'react';
수입 {
  활동표시기,
  단추,
  플랫리스트,
  모달,
  새로고침컨트롤,
  스타일시트,
  텍스트,
  텍스트 입력,
  보다,
} '반응 네이티브'에서;
'react-native-safe-area-context'에서 { SafeAreaView }를 가져옵니다.
import { useDispatch, useSelector } from 'react-redux';
import { useLoginMutation } from './api/authApi';
수입 {
  useCreatePostMutation,
  useDeletePostMutation,
  useGetPostsQuery,
  useLazyGetPostsQuery,
  useUpdatePostMutation,
} './api/postsApi'에서;
import { useGetUserProfileQuery } from './api/usersApi';
가져오기 { 로그아웃 }'./features/auth/authSlice'에서;

const MainApp = () => {
  const [newPostTitle, setNewPostTitle] = useState('');
  const [페이지, setPage] = useState(1);
  const [postsData, setPostsData] = useState([]);
  const [새로고침, setRefreshing] = useState(false);
  const [isModalVisible, setModalVisible] = useState(false);

  const 디스패치 = useDispatch();
  const 토큰 = useSelector((state) => state.auth.token);

  // 로그인 돌연변이
  const [login, { isLoading: isLoggingIn }] = useLoginMutation();

  // 토큰을 사용할 수 있을 때 사용자 프로필을 가져옵니다.
  const { 데이터: userProfile, 다시 가져오기: refetchUserProfile } = useGetUserProfileQuery(정의되지 않음, {
    건너뛰기: !토큰,
  });

  // 페이지가 매겨진 게시물을 가져옵니다.
  const {
    데이터: 게시물,
    로드 중,
    가져오는 중,
    isError,
    다시 가져오기,
  } = useGetPostsQuery({ 페이지, 제한: 10 }); // useQuery 후크는 화면 로드 시 데이터를 가져오려는 경우에 사용됩니다. 예를 들어 프로필 화면에서 사용자 프로필을 가져옵니다.
  // 페이지 1을 직접 가져오기 위해 새로고침 지연 쿼리를 사용합니다.
  const [triggerFetchFirstPage, { data:lazyData }] = useLazyGetPostsQuery(); // useLazyquery는 버튼 클릭과 같이 API 호출을 제어하려는 경우에 사용됩니다.

  const [createPost] = useCreatePostMutation();
  const [updatePost] = useUpdatePostMutation();
  const [deletePost] = useDeletePostMutation();

  useEffect(() => {
    if (게시물) {
      setPostsData((prevData) => (페이지 === 1 ? 게시물: [...prevData, ...게시물]));
    }
  }, [게시물, 페이지]);

  // 로그인 핸들러
  const handlerLogin = async () => {
    노력하다 {
      const 자격 증명 = { 사용자 이름: 'emilys', 비밀번호: 'emilyspass' };
      로그인을 기다립니다(자격 증명);
      console.log('userProfile', userProfile);
      refetchUserProfile();
    } 잡기(오류) {
      console.error('로그인 실패:', error);
    }
  };

  const handlerRefresh = async () => {
    setRefreshing(true);
    setPage(1); // 다음 스크롤을 위해 페이지를 1로 재설정합니다.
    setPostsData([]); // 중복을 피하기 위해 데이터를 지웁니다.

    // 첫 번째 페이지 가져오기를 명시적으로 트리거합니다.
    const { data } = TriggerFetchFirstPage({ 페이지: 1, 제한: 10 })를 기다립니다.

    if (데이터) {
      setPostsData(데이터); // 게시물 데이터를 첫 번째 페이지의 결과로 설정합니다.
    }

    setRefreshing(false);
  };

  // 새 게시물을 작성하여 상단에 추가하고 목록을 다시 가져옵니다.
  const handlerCreatePost = async () => {
    if (newPostTitle) {
      const { data: newPost } = createPost({ title: newPostTitle, body: '새 게시물 콘텐츠' })를 기다리고 있습니다.
      setNewPostTitle('');
      setPostsData((prevData) => [newPost, ...prevData]);
      다시 가져오기();
    }
  };

  // 기존 게시물을 업데이트하고 제목에 "HASAN"을 추가합니다.
  const handlerUpdatePost = 비동기(포스트) => {
    const { data:updatePost } = updatePost를 기다립니다({
      id: post.id,
      제목: `${post.title} 하산`,
    });
    setPostsData((prevData) =>
      prevData.map((item) => (item?.id ===updatePost?.id ?updatePost : item))
    );
  };

  // 게시물을 삭제하고 UI에서 즉시 제거합니다.
  const handlerDeletePost = async (id) => {
    deletePost(id)를 기다립니다;
    setPostsData((prevData) => prevData.filter((post) => post.id !== id));
  };

  // 무한 스크롤을 위해 더 많은 게시물 로드
  const loadMorePosts = () => {
    if (!isFetching) {
      setPage((prevPage) => prevPage 1);
    }
  };

  // 모달 가시성 전환
  const 토글모달 = () => {
    setModalVisible(!isModalVisible);
  };

  if (isLoading && page === 1) return <Text>Loading...</Text>
  if (isError) return <Text>게시물 가져오기 오류.</Text>

  반품 (
    <SafeAreaView>



<ul>
<li>
<strong>MainApp 구성 요소(src/MainApp.js)</strong>:

<ul>
<li>
<strong>상태 및 후크</strong>: 로컬 상태(예: 게시물 페이지 매김) 및 useLoginMutation과 같은 후크를 관리하여 특정 이벤트에 대한 작업을 트리거합니다.</li>
<li>
<strong>로그인</strong>:

<ul>
<li>useLoginMutation을 사용하여 사용자를 로그인한 다음 refetchUserProfile을 트리거하여 사용자 프로필 데이터를 로드합니다.</li>
<li>
<em>조건부 쿼리</em>: 유효한 토큰이 존재할 때만 사용자 프로필을 가져오므로(건너뛰기: !token) 불필요한 API 호출을 줄입니다.</li>
</ul>


</li>

<li>

<strong>게시물 가져오는 중</strong>:

<ul>
<li>useGetPostsQuery를 사용하여 페이지가 매겨진 게시물을 가져오고 사용자가 스크롤할 때 더 많은 데이터를 가져와 무한 스크롤을 지원합니다.</li>
<li>
<em>새로고침 제어</em>: 사용자가 게시물 목록을 새로 고칠 수 있으며, 모바일에서 당겨서 새로 고침 기능에 유용합니다.</li>
</ul>


</li>

<li>

<strong>게시물 생성, 업데이트, 삭제</strong>:

<ul>
<li>
<em>Create</em>: createPost를 호출하여 게시물 목록을 상단에 새 게시물로 즉시 업데이트합니다.</li>
<li>
<em>업데이트</em>: 업데이트 시 게시물 제목에 "HASAN"을 추가합니다.</li>
<li>
<em>삭제</em>: deletePost의 캐시 무효화 덕분에 페이지를 다시 로드할 필요 없이 게시물을 제거하고 UI를 업데이트합니다.</li>
</ul>


</li>

<li>

<strong>UI 요소</strong>:

<ul>
<li>모달은 사용자 프로필을 표시합니다. 프로필 버튼은 userProfile 데이터가 로드된 경우에만 나타나므로 사용자 경험이 향상됩니다.</li>
</ul>


</li>

<li>

<strong>FlatList</strong>: 게시물을 스크롤 가능하고 페이지가 매겨진 형식으로 표시하여 유용성을 높입니다.</li>

</ul>

</li>

</ul>


<hr>

<h2>
  
  
  요약:
</h2>

<p>React Native 앱은 효율적인 데이터 관리 및 API 상호 작용을 위해 <strong>Redux Toolkit(RTK) 쿼리</strong>를 사용합니다. 설정에는 다음이 포함됩니다.</p>

<ol>
<li><p><strong>스토어 구성</strong>: 앱 세션 전체에서 특정 데이터를 저장하기 위한 redux-persist, 오류 로깅을 위한 맞춤형 미들웨어, 개발 모드에서 디버깅을 위한 Reactotron을 갖춘 Redux 스토어.</p></li>
<li>
<p><strong>RTK 쿼리가 포함된 API</strong>:</p><ul>
<li>
<strong>authApi</strong>는 로그인 변형으로 인증을 처리하고 토큰을 Redux에 저장합니다.</li>
<li>
<strong>postsApi</strong>는 게시물이 추가, 업데이트 또는 삭제될 때 캐시 태그를 사용하여 자동으로 데이터를 새로 고치는 게시물에 대한 CRUD 작업을 제공합니다.</li>
<li>
<strong>usersApi</strong>는 동적 토큰 기반 인증 헤더를 사용하여 사용자 프로필을 가져옵니다.</li>
</ul>
</li>
<li><p><strong>Auth Slice</strong>: 인증 토큰을 관리하고 로그인/로그아웃 시 토큰을 설정하거나 삭제하는 작업을 제공합니다.</p></li>
<li>
<p><strong>앱 및 MainApp 구성요소</strong>:</p>

<ul>
<li>메인 앱은 Provider 및 PersistGate의 구성 요소를 래핑하여 렌더링 전에 상태가 로드되도록 합니다.</li>
<li>
MainApp은 게시물 가져오기, 생성, 업데이트 및 삭제를 관리합니다. 조건부로 데이터를 로드하고(예: 토큰이 존재할 때만 사용자 프로필 가져오기) 페이지 매김 및 무한 스크롤을 지원합니다. </li>
<li>페이지가 매겨진 게시물 목록에는 FlatList를 사용하고, 프로필에는 모달을 사용하고, 깔끔하고 정리된 레이아웃을 위한 기본 스타일을 사용합니다.</li>
</ul>
</li>
</ol>

<blockquote>
<p>전체 코드->