完整的 Redux 工具包 - 非同步邏輯（第 -2 部分）

1。 Redux Toolkit 中的非同步邏輯簡介

在 Redux 中處理非同步邏輯通常涉及大量樣板程式碼，例如建立操作類型、操作建立者和減速器來處理不同的狀態（載入、成功、錯誤）。 Redux Toolkit 使用 createAsyncThunk 簡化了這個過程，它允許您以最少的設定為非同步操作定義「thunk」。

createAsyncThunk：

• 自動產生待處理、完成和拒絕的操作類型。
• 更容易處理 API 請求等副作用。
• 與使用 createSlice 建立的切片無縫整合。

2。使用 createAsyncThunk 進行 API 呼叫

讓我們逐步建立一個非同步 thunk 以從公用 API 取得資料並管理不同的載入狀態。

第 1 步：設定簡單的 API 服務
我們將使用免費的公共 API 來示範此範例。假設我們有一個傳回帖子列表的 API 端點。

第 2 步：建立非同步 Thunk
首先，在 features/posts 目錄中建立一個名為 postsSlice.js 的新切片檔案。我們將使用 createAsyncThunk 非同步獲取帖子。

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

說明：

createAsyncThunk：此函數有兩個參數：字串運算型別和非同步函數。非同步函數是 API 呼叫發生的地方。當承諾解決時，資料將被傳回並自動分派為已完成的操作負載。

extraReducers：用於處理 createAsyncThunk 產生的運算。我們管理三種狀態：待處理、完成和拒絕。

3。將 thunk 整合到組件中

現在，讓我們在 React 元件中使用 fetchPosts thunk 並顯示資料。

第 1 步：建立 PostsList 元件
在 features/posts 目錄下建立 PostsList.js 元件：

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

說明：

useEffect 鉤子在元件安裝時調度 fetchPosts，但前提是目前狀態為「空閒」。
檢查狀態以確定要呈現的內容（載入微調器、貼文清單或錯誤訊息）。

第 2 步：將貼文清單新增至應用程式

更新主 App.js 檔案以包含 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。非同步 Thunk 的最佳實踐

避免組件中的繁重邏輯：透過分派 thunk 來處理非同步邏輯，保持元件乾淨。
集中錯誤處理：處理切片中的錯誤，而不是在每個元件中重複邏輯。
標準化資料：考慮使用 Normalizr 等函式庫標準化狀態形狀，以有效管理複雜的資料結構。
記憶選擇器：使用重新選擇中的 createSelector 來記憶選擇器以獲得更好的性能。

5。結論與後續步驟
在這一部分中，我們探討如何使用 createAsyncThunk 處理 Redux Toolkit 中的非同步邏輯。我們學習如何建立非同步 thunk、處理不同的狀態以及在元件中使用它。在下一部分中，我們將深入研究 RTK Query——一個強大的資料擷取和快取工具，可進一步簡化 Redux 開發。

_
敬請期待第三部分：RTK查詢簡介！ _

以上是完整的 Redux 工具包 - 非同步邏輯（第 -2 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！