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';
輸入 {
  アクティビティインジケーター、
  ボタン、
  フラットリスト、
  モーダル、
  リフレッシュコントロール、
  スタイルシート、
  文章、
  テキスト入力、
  ビュー、
「反応ネイティブ」から;
import { SafeAreaView } から 'react-native-safe-area-context';
import { useDispatch, useSelector } から 'react-redux';
import { useLoginMutation } から './api/authApi';
輸入 {
  useCreatePostMutation、
  useDeletePostMutation、
  useGetPostsQuery、
  useLazyGetPostsQuery、
  UpdatePostMutation を使用する、
'./api/postsApi' から;
import { useGetUserProfileQuery } から './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 token = useSelector((state) => state.auth.token);

  // ログインの突然変異
  const [login, { isLoading: isLoggingIn }] = useLoginMutation();

  // トークンが利用可能な場合にユーザー プロファイルを取得します
  const { データ: userProfile, refetch: refetchUserProfile } = useGetUserProfileQuery(未定義, {
    スキップ: !トークン、
  });

  // ページ分割された投稿を取得します
  定数{
    データ: 投稿、
    読み込み中、
    フェッチ中、
    エラーです、
    再フェッチ、
  } = 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, ...posts]));
    }
  }, [投稿、ページ]);

  // ログインハンドラ
  const handleLogin = async () => {
    試す {
      const credentials = { ユーザー名: 'emilys'、パスワード: 'emilyspass' };
      ログインを待ちます(認証情報);
      console.log('ユーザープロファイル', ユーザープロファイル);
      refetchUserProfile();
    } キャッチ (エラー) {
      console.error('ログインに失敗しました:', エラー);
    }
  };

  const handleRefresh = async () => {
    setRefreshing(true);
    setPage(1); // 次のスクロールのためにページを 1 にリセットします
    setPostsData([]); // 重複を避けるためにデータをクリアします

    // 最初のページのフェッチを明示的にトリガーします
    const { data } = awaittriggerFetchFirstPage({ ページ: 1, 制限: 10 });

    if (データ) {
      setPostsData(データ); // 投稿データを最初のページの結果に設定します
    }

    setRefreshing(false);
  };

  // 新しい投稿を作成して先頭に追加し、リストを再取得します
  const handleCreatePost = async () => {
    if (newPostTitle) {
      const { data: newPost } = await createPost({ title: newPostTitle, body: '新規投稿コンテンツ' });
      setNewPostTitle('');
      setPostsData((prevData) => [newPost, ...prevData]);
      再フェッチ();
    }
  };

  // 既存の投稿を更新し、タイトルに「HASAN」を追加します
  const handleUpdatePost = async (post) => {
    const { データ: updatedPost } = updatePostを待ちます({
      id: post.id、
      タイトル: `${post.title} ハサン`,
    });
    setPostsData((prevData) =>
      prevData.map((item) => (item?.id === updatedPost?.id ? updatedPost : item))
    );
  };

  // 投稿を削除し、すぐに UI から削除します
  const handleDeletePost = async (id) => {
    deletePost(id) を待ちます;
    setPostsData((prevData) => prevData.filter((post) => post.id !== id));
  };

  // 無限スクロールのためにさらに投稿を読み込みます
  constloadMorePosts = () => {
    if (!isFetching) {
      setPage((前のページ) => 前のページ 1);
    }
  };

  // モーダルの可視性を切り替えます
  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  if (isLoading && page === 1) return <Text>Loading...</Text>;
  if (isError) return <Text>投稿の取得中にエラーが発生しました。</Text>;

  戻る （