Kit Alat Redux Lengkap - Logik Async dengan(Bahagian -2)

1. Pengenalan kepada Async Logic dalam Redux Toolkit

Mengendalikan logik tak segerak dalam Redux selalunya melibatkan banyak kod boilerplate, seperti mencipta jenis tindakan, pencipta tindakan dan pengurang untuk mengendalikan keadaan yang berbeza (pemuatan, kejayaan, ralat). Redux Toolkit memudahkan ini dengan createAsyncThunk, yang membolehkan anda mentakrifkan "thunk" untuk operasi tak segerak dengan persediaan minimum.

createAsyncThunk:

• Menjana jenis tindakan yang belum selesai, dipenuhi dan ditolak secara automatik.
• Membuat lebih mudah untuk mengendalikan kesan sampingan seperti permintaan API.
• Bersepadu dengan lancar dengan kepingan yang dibuat menggunakan createSlice.

2. Menggunakan createAsyncThunk untuk Panggilan API

Mari kita membuat langkah async untuk mengambil data daripada API awam dan mengurus keadaan pemuatan yang berbeza.

Langkah 1: Menyediakan Perkhidmatan API Mudah
Kami akan menggunakan API awam percuma untuk menunjukkan contoh ini. Katakan kita mempunyai titik akhir API yang mengembalikan senarai siaran.

Langkah 2: Mencipta Async Thunk
Mula-mula, buat fail hirisan baharu bernama postsSlice.js di dalam direktori ciri/siaran. Kami akan menggunakan createAsyncThunk untuk mengambil siaran secara tidak segerak.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

Penjelasan:

createAsyncThunk: Fungsi ini mengambil dua argumen: jenis tindakan rentetan dan fungsi tak segerak. Fungsi async ialah tempat panggilan API berlaku. Apabila janji diselesaikan, data dikembalikan dan dihantar secara automatik sebagai muatan tindakan yang dipenuhi.

extraReducers: Ini digunakan untuk mengendalikan tindakan yang dihasilkan oleh createAsyncThunk. Kami menguruskan tiga keadaan: belum selesai, dipenuhi dan ditolak.

3. Mengintegrasikan Thunks ke dalam Komponen

Sekarang, mari kita gunakan fetchPosts thunk dalam komponen React dan paparkan data.

Langkah 1: Buat Komponen Senarai Catatan
Buat komponen PostsList.js dalam direktori ciri/siaran:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = <p>Loading...</p>;
  } else if (status === 'succeeded') {
    content = (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  } else if (status === 'failed') {
    content = <p>{error}</p>;
  }

  return (
    <section>
      <h2>Posts</h2>
      {content}
    </section>
  );
};

export default PostsList;

Penjelasan:

Kait useEffect menghantar fetchPosts apabila komponen dipasang, tetapi hanya jika status semasa 'terbiar'.
Status disemak untuk menentukan kandungan yang hendak dipaparkan (memuatkan pemutar, senarai siaran atau mesej ralat).

Langkah 2: Tambahkan Senarai Siaran pada Apl

Kemas kini fail App.js utama untuk memasukkan komponen PostsList:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    <div className="App">
      <PostsList />
    </div>
  );
}

export default App;

4. Amalan Terbaik untuk Async Thunks

Elakkan Logik Berat dalam Komponen: Pastikan komponen bersih dengan menghantar thunks untuk mengendalikan logik tak segerak.
Sentuhkan Pengendalian Ralat: Kendalikan ralat dalam kepingan anda dan bukannya mengulangi logik dalam setiap komponen.
Normalize Data: Pertimbangkan untuk menormalkan bentuk keadaan menggunakan pustaka seperti normalizr untuk mengurus struktur data yang kompleks dengan cekap.
Pemilih Memoize: Gunakan createSelector daripada pilih semula untuk menghafal pemilih untuk prestasi yang lebih baik.

5. Kesimpulan dan Langkah Seterusnya
Dalam bahagian ini, kami meneroka cara mengendalikan logik tak segerak dalam Redux Toolkit menggunakan createAsyncThunk. Kami belajar cara membuat thunk async, mengendalikan keadaan berbeza dan menggunakannya dalam komponen. Dalam bahagian seterusnya, kami akan menyelami RTK Query—alat yang berkuasa untuk pengambilan data dan caching yang memudahkan lagi pembangunan Redux.

_
Nantikan Bahagian 3: Pengenalan kepada Pertanyaan RTK!_

Atas ialah kandungan terperinci Kit Alat Redux Lengkap - Logik Async dengan(Bahagian -2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!