完整的 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中文网其他相关文章！