1。 Redux Toolkit 中的非同步邏輯簡介
在 Redux 中處理非同步邏輯通常涉及大量樣板程式碼，例如建立操作類型、操作建立者和減速器來處理不同的狀態（載入、成功、錯誤）。 Redux Toolkit 使用 createAsyncThunk 簡化了這個過程，它允許您以最少的設定為非同步操作定義「thunk」。
createAsyncThunk：
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中文網其他相關文章！
