Kit alat redux lengkap (Bahagian -

Bahagian 3: Pengenalan kepada Pertanyaan RTK

Dalam bahagian ini kami akan meliputi pertanyaan RTK

1. Apakah Pertanyaan RTK?

Walaupun Redux Toolkit menyediakan alatan berkuasa untuk mengurus logik keadaan dan tak segerak, ia masih memerlukan kod boilerplate yang ketara untuk mengendalikan pengambilan data dan caching. Pertanyaan RTK, yang diperkenalkan dalam Redux Toolkit v1.6, bertujuan untuk menyelesaikan masalah ini dengan menyediakan satu set alat berkuasa untuk pengambilan data dan caching yang cekap dengan persediaan yang minimum.

Ciri utama Pertanyaan RTK:

• Pengambilan Data dan Cache: Mengendalikan caching, penolakan dan pengambilan semula secara automatik.
• Kemas Kini Optimis dan Penyegerakan Masa Nyata: Uruskan kemas kini optimistik dan penyegerakan data masa nyata dengan mudah.
• API Deklaratif dan Mudah: Reka bentuk API intuitif dengan kod plat dandang yang minimum.
• Bersepadu dengan Redux Toolkit: Dibina di atas Redux Toolkit, membenarkan penyepaduan yang lancar.

2. Menyediakan Pertanyaan RTK

Untuk bermula dengan Pertanyaan RTK, kami perlu menentukan perkhidmatan API yang menentukan cara untuk mengambil data dan titik akhir yang tersedia. Mari buat contoh menggunakan API siaran mudah.

Langkah 1: Tentukan Perkhidmatan API

Buat fail baharu bernama postsApi.js dalam direktori ciri/siaran. Fail ini akan mentakrifkan titik akhir API untuk mengambil dan memutasi siaran.

// 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;

Penjelasan:

• createApi: Fungsi ini digunakan untuk menentukan perkhidmatan API. Ia menjana kepingan API, mengurus kedai, pengurang dan tindakan secara automatik untuk anda.
• baseQuery: Fungsi yang mentakrifkan URL asas untuk API anda. fetchBaseQuery ialah pembalut ringan di sekeliling API pengambilan standard.
• titik akhir: Fungsi yang mentakrifkan titik akhir untuk API. Kami mentakrifkan dua titik akhir di sini: fetchPosts untuk pertanyaan data dan addPost untuk membuat siaran baharu.

Langkah 2: Integrasikan Perkhidmatan API ke dalam Redux Store

Tambahkan pengurang postsApi pada stor dan konfigurasikan perisian tengah untuk mendayakan caching dan penolakan.

Kemas kini store.js untuk menyepadukan postsApi:

// 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. Menggunakan Pertanyaan RTK dalam Komponen

Pertanyaan RTK menjana cangkuk tersuai berdasarkan titik akhir yang ditakrifkan dalam perkhidmatan API. Cangkuk ini digunakan untuk melakukan pengambilan data, mutasi dan mengurus caching secara automatik.

Langkah 1: Mengambil Data dengan useFetchPostsQuery

Buat komponen PostsList.js untuk mengambil dan memaparkan senarai siaran.

// 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>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostsList;

Penjelasan:

• useFetchPostsQuery: Cangkuk tersuai yang dijana oleh RTK Query untuk titik akhir fetchPosts. Ia mengembalikan objek yang mengandungi data yang diambil (data), keadaan pemuatan (isLoading) dan keadaan ralat (ralat).
• Komponen secara bersyarat menjadikan keadaan pemuatan, ralat atau data berdasarkan output cangkuk.

Langkah 2: Menambah Data dengan useAddPostMutation

Buat komponen AddPostForm.js untuk menambah catatan baharu menggunakan mutasi addPost.

// 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>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}>
          {isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </form>
    </section>
  );
};

export default AddPostForm;

Penjelasan:

• useAddPostMutation: Cangkuk tersuai yang dijana oleh RTK Query untuk mutasi addPost. Ia menyediakan fungsi (addPost) untuk mencetuskan mutasi dan keadaan pemuatan (isLoading).
• unwrap(): Membolehkan kami membuka bungkusan yang diselesaikan atau ditolak daripada mutasi untuk mengendalikan kesan sampingan selepas permintaan.

4. Mengendalikan Cache, Ralat dan Kemas Kini Optimis

Pertanyaan RTK secara automatik mengendalikan caching, keadaan ralat dan membatalkan cache apabila mutasi berlaku. Anda boleh menyesuaikan tingkah laku dengan teg dan konfigurasi lain.

Langkah 1: Menggunakan providesTags dan invalidatesTags

Ubah suai postsApi untuk menggunakan teg untuk ketidaksahihan cache:

// 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;

Penjelasan:

• providesTags: Ini digunakan untuk menandai data yang diambil daripada pertanyaan fetchPosts. Ia membantu dalam membatalkan cache dengan cekap apabila data baharu ditambahkan.
• invalidatesTags: Ini digunakan dalam mutasi addPost untuk membatalkan cache dan mengambil semula data yang dikemas kini.

5. Kesimpulan dan Langkah Seterusnya

Dalam bahagian ini, kami meneroka cara menggunakan Pertanyaan RTK untuk mengendalikan pengambilan data dan caching dalam aplikasi Redux. Kami meliputi penyediaan perkhidmatan API, mentakrifkan titik akhir dan menggunakan cangkuk yang dijana untuk membuat pertanyaan dan mengubah data. RTK Query memudahkan pengambilan data dan pengurusan keadaan dengan kod minimum, menjadikannya alat yang berkuasa untuk aplikasi Redux moden.

在下一部分中，我們將深入探討RTK 查詢中的高階主題，例如自訂查詢、使用 baseQuery、處理驗證和最佳化效能。

請關注第 4 部分：RTK 查詢中的高級主題！

Atas ialah kandungan terperinci Kit alat redux lengkap (Bahagian -. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!