Effiziente Datenverarbeitung in React Native mit RTK-Abfrage

// 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';
importieren {
  Aktivitätsindikator,
  Taste,
  FlatList,
  Modal,
  RefreshControl,
  StyleSheet,
  Text,
  Texteingabe,
  Sicht,
} von 'react-native';
import { SafeAreaView } aus 'react-native-safe-area-context';
import { useDispatch, useSelector } from 'react-redux';
import { useLoginMutation } from './api/authApi';
importieren {
  useCreatePostMutation,
  useDeletePostMutation,
  useGetPostsQuery,
  useLazyGetPostsQuery,
  useUpdatePostMutation,
} from './api/postsApi';
import { useGetUserProfileQuery } from './api/usersApi';
importieren {abmelden}von './features/auth/authSlice';

const MainApp = () => {
  const [newPostTitle, setNewPostTitle] = useState('');
  const [page, setPage] = useState(1);
  const [postsData, setPostsData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [isModalVisible, setModalVisible] = useState(false);

  const distribution = useDispatch();
  const token = useSelector((state) => state.auth.token);

  // Login-Mutation
  const [login, { isLoading: isLoggingIn }] = useLoginMutation();

  // Benutzerprofil abrufen, wenn Token verfügbar ist
  const { data: userProfile, refetch: refetchUserProfile } = useGetUserProfileQuery(undefiniert, {
    überspringen: !token,
  });

  // Paginierte Beiträge abrufen
  const {
    Daten: Beiträge,
    wird geladen,
    isFetching,
    isError,
    erneut abrufen,
  } = useGetPostsQuery({ page, limit: 10 }); // Der useQuery-Hook wird verwendet, wenn Sie Daten beim Laden des Bildschirms abrufen möchten. Rufen Sie beispielsweise das Benutzerprofil auf dem Profilbildschirm ab.
  // Verwenden Sie die Lazy-Abfrage für die Aktualisierung, um Seite 1 direkt abzurufen
  const [triggerFetchFirstPage, { data: lazyData }] = useLazyGetPostsQuery(); // useLazyquery wird verwendet, wenn Sie den API-Aufruf steuern möchten, z. B. beim Klicken auf eine Schaltfläche.

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

  useEffect(() => {
    if (Beiträge) {
      setPostsData((prevData) => (page === 1 ? posts : [...prevData, ...posts]));
    }
  }, [Beiträge, Seite]);

  // Login-Handler
  const handleLogin = async () => {
    versuchen {
      const credentials = { Benutzername: 'emilys', Passwort: 'emilyspass' };
      Warten Sie auf die Anmeldung (Anmeldeinformationen);
      console.log('userProfile', userProfile);
      refetchUserProfile();
    } Catch (Fehler) {
      console.error('Anmeldung fehlgeschlagen:', Fehler);
    }
  };

  const handleRefresh = async () => {
    setRefreshing(true);
    setPage(1); // Setze die Seite für die nächsten Scrolls auf 1 zurück
    setPostsData([]); // Löschen Sie die Daten, um Duplikate zu vermeiden

    // Den ersten Seitenabruf explizit auslösen
    const { data } = waiting triggerFetchFirstPage({ page: 1, limit: 10 });

    if (Daten) {
      setPostsData(data); // Setze die Beitragsdaten auf die Ergebnisse der ersten Seite
    }

    setRefreshing(false);
  };

  // Einen neuen Beitrag erstellen, ihn oben hinzufügen und die Liste erneut abrufen
  const handleCreatePost = async () => {
    if (newPostTitle) {
      const { data: newPost } = waiting createPost({ title: newPostTitle, body: 'New post content' });
      setNewPostTitle('');
      setPostsData((prevData) => [newPost, ...prevData]);
      refetch();
    }
  };

  // Einen vorhandenen Beitrag aktualisieren und „HASAN“ zum Titel hinzufügen
  const handleUpdatePost = async (post) => {
    const { data: updatePost } = waiting updatePost({
      ID: post.id,
      Titel: `${post.title} HASAN`,
    });
    setPostsData((prevData) =>
      prevData.map((item) => (item?.id === aktualisierterBeitrag?.id ? aktualisierterBeitrag: Artikel))
    );
  };

  // Einen Beitrag löschen und ihn sofort aus der Benutzeroberfläche entfernen
  const handleDeletePost = async (id) => {
    Warten auf deletePost(id);
    setPostsData((prevData) => prevData.filter((post) => post.id !== id));
  };

  // Laden Sie mehr Beiträge für endloses Scrollen
  const loadMorePosts = () => {
    if (!isFetching) {
      setPage((prevPage) => prevPage 1);
    }
  };

  // Modale Sichtbarkeit umschalten
  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  if (isLoading && page === 1) return <Text>Loading...</Text>;
  if (isError) return <Text>Fehler beim Abrufen von Beiträgen.</Text>;

  zurückkehren (
    <SafeAreaView>



<ul>
<li>
<strong>MainApp-Komponente (src/MainApp.js)</strong>:

<ul>
<li>
<strong>Status und Hooks</strong>: Verwaltet lokale Status (z. B. für die Paginierung von Beiträgen) und Hooks wie useLoginMutation, um Aktionen bei bestimmten Ereignissen auszulösen.</li>
<li>
<strong>Anmelden</strong>:

<ul>
<li>Verwendet useLoginMutation, um den Benutzer anzumelden, und löst dann refetchUserProfile aus, um die Benutzerprofildaten zu laden.</li>
<li>
<em>Bedingte Abfrage</em>: Ruft das Benutzerprofil nur ab, wenn ein gültiges Token vorhanden ist (überspringen: !token), wodurch unnötige API-Aufrufe reduziert werden.</li>
</ul>


</li>

<li>

<strong>Beiträge abrufen</strong>:

<ul>
<li>Verwendet useGetPostsQuery zum Abrufen paginierter Beiträge und unterstützt das unendliche Scrollen, indem mehr Daten abgerufen werden, während der Benutzer scrollt.</li>
<li>
<em>Aktualisierungssteuerung</em>: Ermöglicht Benutzern das Aktualisieren der Beitragsliste, nützlich für die Pull-to-Refresh-Funktion auf Mobilgeräten.</li>
</ul>


</li>

<li>

<strong>Beiträge erstellen, aktualisieren, löschen</strong>:

<ul>
<li>
<em>Erstellen</em>: Ruft createPost auf und aktualisiert sofort die Beitragsliste mit dem neuen Beitrag ganz oben.</li>
<li>
<em>Aktualisieren</em>: Hängt beim Aktualisieren „HASAN“ an den Titel eines Beitrags an.</li>
<li>
<em>Löschen</em>: Entfernt einen Beitrag und aktualisiert die Benutzeroberfläche, ohne dass die Seite neu geladen werden muss, dank der Cache-Ungültigmachung von deletePost.</li>
</ul>


</li>

<li>

<strong>UI-Elemente</strong>:

<ul>
<li>Ein Modal zeigt das Benutzerprofil an. Die Profilschaltfläche wird nur angezeigt, wenn Benutzerprofildaten geladen sind, was das Benutzererlebnis verbessert.</li>
</ul>


</li>

<li>

<strong>FlatList</strong>: Zeigt Beiträge in einem scrollbaren, paginierten Format an und verbessert so die Benutzerfreundlichkeit.</li>

</ul>

</li>

</ul>


<hr>

<h2>
  
  
  Zusammenfassung:
</h2>

<p>Ihre React Native-App verwendet <strong>Redux Toolkit (RTK) Query</strong> für effiziente Datenverwaltung und API-Interaktionen. Das Setup umfasst:</p>

<ol>
<li><p><strong>Store-Konfiguration</strong>: Redux-Store mit Redux-Persist zum Speichern spezifischer Daten über App-Sitzungen hinweg, eine benutzerdefinierte Middleware für die Fehlerprotokollierung und Reactotron für das Debuggen im Entwicklungsmodus.</p></li>
<li>
<p><strong>APIs mit RTK-Abfrage</strong>:</p><ul>
<li>
<strong>authApi</strong> übernimmt die Authentifizierung mit einer Login-Mutation und speichert das Token in Redux.</li>
<li>
<strong>postsApi</strong> stellt CRUD-Operationen für Beiträge bereit und verwendet Cache-Tags, um Daten automatisch zu aktualisieren, wenn Beiträge hinzugefügt, aktualisiert oder gelöscht werden.</li>
<li>
<strong>usersApi</strong> ruft das Benutzerprofil mit dynamischen tokenbasierten Autorisierungsheadern ab.</li>
</ul>
</li>
<li><p><strong>Auth Slice</strong>: Verwaltet das Authentifizierungstoken und stellt Aktionen zum Festlegen oder Löschen des Tokens beim Anmelden/Abmelden bereit.</p></li>
<li>
<p><strong>App- und MainApp-Komponenten</strong>:</p>

<ul>
<li>Die Haupt-App verpackt Komponenten in Provider und PersistGate und stellt so sicher, dass der Status vor dem Rendern geladen wird.</li>
<li>
MainApp verwaltet das Abrufen, Erstellen, Aktualisieren und Löschen von Beiträgen. Es lädt Daten bedingt (z. B. ruft das Benutzerprofil nur ab, wenn ein Token vorhanden ist), unterstützt Paginierung und unendliches Scrollen </li>
<li>Verwendet FlatList für eine paginierte Beitragsliste, Modalitäten für das Profil und grundlegende Stile für ein sauberes, organisiertes Layout.</li>
</ul>
</li>
</ol>

<blockquote>
<p>VOLLSTÄNDIGER CODE->