完整的 redux 工具包（第 4 部分）

Bahagian 4: Topik Lanjutan dalam Pertanyaan RTK.

Bahagian ini akan menumpukan pada ciri lanjutan dan kes penggunaan dalam Pertanyaan RTK, termasuk menyesuaikan pertanyaan, pengendalian pengesahan, kemas kini optimistik dan pengoptimuman prestasi.

Bahagian 4: Topik Lanjutan dalam Pertanyaan RTK

1. Pengenalan kepada Konsep Pertanyaan RTK Lanjutan

Dalam bahagian sebelumnya, kami membincangkan asas penggunaan RTK Query untuk mengambil dan mengubah data. Kini, kami akan menyelami ciri yang lebih maju yang menjadikan Pertanyaan RTK lebih berkuasa. Ciri ini membolehkan anda menyesuaikan pertanyaan, mengurus pengesahan, mengoptimumkan prestasi dan mengendalikan kemas kini optimistik untuk pengalaman pengguna yang lebih lancar.

2. Menyesuaikan baseQuery untuk Pengesahan

Apabila bekerja dengan API yang memerlukan pengesahan, anda perlu menyesuaikan baseQuery untuk memasukkan pengepala pengesahan seperti token JWT atau kunci API.

Langkah 1: Buat BaseQuery Tersuai

Anda boleh mencipta fungsi baseQuery tersuai yang menambahkan pengepala kebenaran pada setiap permintaan.

// src/app/customBaseQuery.js
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const customBaseQuery = fetchBaseQuery({
  baseUrl: 'https://jsonplaceholder.typicode.com/',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token; // Assuming auth slice has token
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

export default customBaseQuery;

Penjelasan:

• prepareHeaders: Fungsi ini membolehkan anda menyesuaikan pengepala untuk setiap permintaan. Ia mendapatkan semula token daripada kedai Redux dan melampirkannya pada pengepala Kebenaran.

Langkah 2: Gunakan Custom baseQuery dalam createApi

Ubah suai fail postsApi.js anda untuk menggunakan baseQuery tersuai:

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

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: customBaseQuery, // Use the custom base query here
  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;

3. Kemas Kini Optimis dengan Pertanyaan RTK

Kemas kini optimistik membolehkan anda mengemas kini UI dengan segera sebelum pelayan mengesahkan mutasi, memberikan pengalaman pengguna yang lebih lancar. Jika pelayan mengembalikan ralat, UI boleh kembali kepada keadaan sebelumnya.

Langkah 1: Laksanakan Kemas Kini Optimis dalam Mutasi

Anda boleh melaksanakan kemas kini optimistik menggunakan kaedah kitaran hayat onQueryStarted yang disediakan oleh RTK Query.

// src/features/posts/postsApi.js
addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
  invalidatesTags: ['Post'],
  onQueryStarted: async (newPost, { dispatch, queryFulfilled }) => {
    // Optimistic update: immediately add the new post to the cache
    const patchResult = dispatch(
      postsApi.util.updateQueryData('fetchPosts', undefined, (draftPosts) => {
        draftPosts.push({ id: Date.now(), ...newPost }); // Fake ID for optimistic update
      })
    );
    try {
      await queryFulfilled; // Await server response
    } catch {
      patchResult.undo(); // Revert if the mutation fails
    }
  },
}),

Penjelasan:

• onQueryStarted: Kaedah kitaran hayat ini dicetuskan apabila mutasi bermula. Ia menyediakan parameter penghantaran dan queryFulfilled untuk mengurus kemas kini cache.
• postsApi.util.updateQueryData: Fungsi utiliti ini membolehkan anda mengemas kini data cache secara optimistik.
• patchResult.undo(): Mengembalikan kemas kini optimistik jika pelayan mengembalikan ralat.

4. Mengendalikan Pertanyaan Bergantungan

Kadangkala, anda mungkin perlu melakukan pertanyaan bergantung, di mana satu pertanyaan bergantung pada hasil pertanyaan yang lain. Pertanyaan RTK menyediakan parameter langkau untuk mengawal apabila pertanyaan dilaksanakan.

Contoh: Ambil Butiran Catatan Berdasarkan ID Catatan Terpilih

// src/features/posts/PostDetails.js
import React from 'react';
import { useFetchPostQuery } from './postsApi';

const PostDetails = ({ postId }) => {
  const { data: post, error, isLoading } = useFetchPostQuery(postId, { skip: !postId });

  if (!postId) return <p>Select a post to view details.</p>;
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading post details.</p>;

  return (
    <div>
      <h3 id="post-title">{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
};

export default PostDetails;

Penjelasan:

• useFetchPostQuery: Cangkuk pertanyaan yang mengambil postId sebagai hujah. Jika postId tidak diberikan, pertanyaan dilangkau menggunakan { skip: !postId }.

5. Undian dan Data Masa Nyata dengan Pertanyaan RTK

Pertanyaan RTK menyokong tinjauan pendapat untuk memastikan data segar pada selang waktu tertentu. Ini berguna untuk penyegerakan data masa nyata.

Langkah 1: Gunakan Undian dalam Pertanyaan

Anda boleh mendayakan pengundian untuk sebarang pertanyaan menggunakan pilihan PollingInterval.

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

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery(undefined, {
    pollingInterval: 30000, // Poll every 30 seconds
  });

  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;

Penjelasan:

• pollingInterval: Pilihan ini menentukan selang (dalam milisaat) di mana pertanyaan harus meninjau pelayan untuk data baharu.

6. Mengoptimumkan Prestasi dengan selectFromResult

Pertanyaan RTK menyediakan pilihan selectFromResult untuk pengoptimuman prestasi lanjutan dengan membenarkan anda memilih data tertentu daripada hasil pertanyaan.

Langkah 1: Menggunakan selectFromResult untuk Mengoptimumkan Re-Renders

Pilihan selectFromResult boleh digunakan untuk mengelakkan pemaparan semula yang tidak perlu apabila hanya subset hasil pertanyaan diperlukan.

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

const PostTitleList = () => {
  const { data: posts } = useFetchPostsQuery(undefined, {
    selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }),
  });

  return (
    <section>
      <h2 id="Post-Titles">Post Titles</h2>
      <ul>
        {posts?.map((title, index) => (
          <li key="{index}">{title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostTitleList;

Penjelasan:

• selectFromResult: Pilihan ini membenarkan anda memilih tajuk sahaja daripada siaran yang diambil, menghalang pemaparan semula yang tidak perlu apabila data lain dalam hasil pertanyaan berubah.

7. Kesimpulan dan Langkah Seterusnya

Dalam bahagian ini, kami meneroka topik lanjutan dalam RTK Query, seperti menyesuaikan baseQuery untuk pengesahan, mengendalikan kemas kini optimistik, mengurus pertanyaan bergantung, menggunakan tinjauan pendapat untuk penyegerakan data masa nyata dan mengoptimumkan prestasi dengan selectFromResult. Set ciri kaya RTK Query menjadikannya alat yang berkuasa untuk mengendalikan pengambilan data dan caching dalam aplikasi Redux moden.

Dalam bahagian seterusnya, kita akan membincangkan Strategi Pengujian untuk Redux Toolkit dan Pertanyaan RTK, meliputi ujian unit, ujian integrasi dan amalan terbaik untuk memastikan kod yang mantap dan boleh diselenggara.

Nantikan Bahagian 5: Menguji Strategi untuk Redux Toolkit dan Pertanyaan RTK!

以上是完整的 redux 工具包（第 4 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！