完整的 Redux 工具包 – 异步逻辑（第 -2 部分）-青狐资源网

1。 redux toolkit 中的异步逻辑简介

在 redux 中处理异步逻辑通常涉及大量样板代码，例如创建操作类型、操作创建者和减速器来处理不同的状态（加载、成功、错误）。 redux toolkit 使用 createasyncthunk 简化了这一过程，它允许您以最少的设置为异步操作定义“thunk”。

createasyncthunk：

自动生成待处理、已完成和拒绝的操作类型。更容易处理 api 请求等副作用。与使用 createslice 创建的切片无缝集成。

2。使用 createasyncthunk 进行 api 调用

让我们逐步创建一个异步 thu项目搭建网点我wcqh.cnnk 以从公共 api 获取数据并管理不同的加载状态。

第 1 步：设置简单的 api 服务

我们将使用免费的公共 api 来演示此示例。假设我们有一个返回帖子列表的 api 端点。

第 2 步：创建异步 thunk

首先，在 features/posts 目录中创建一个名为 postsslice.js 的新切片文件。我们将使用 createasyncthunk 异步获取帖子。

// src/features/posts/postsslice.js

import { creat项目搭建网点我wcqh.cneslice, 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项目搭建网点我wcqh.cn 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, 项目搭建网点我wcqh.cn(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.reduce项目搭建网点我wcqh.cnr;

登录后复制

说明：

createasyncthunk：该函数有两个参数：字符串操作类型和异步函数。异步函数是 api 调用发生的地方。当承诺解决时，数据将被返回并自动分派为已完成的操作负载。

extrareducers：用于处理 createasyncthunk 生成的操作。我们管理三种状态：待处理、已完成和已拒绝。

3。将 thunk 集成到组件中

现在，让我们在 react 组件中使用 fetchposts thunk 并显示数据。

第 1 步：创建 postslist 组件

在 features/posts 目录下创建 postslist.js 组件：

16项目搭建网点我wcqh.cn

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

co项目搭建网点我wcqh.cnnst 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 === succee项目搭建网点我wcqh.cnded) {

content = (

登录后复制

{posts.map((post) => ( {post.title} ))} ); } else if (status === failed) { content =

{error}

; } return (

posts

{content} ); }; export default postslist;

说明：

useeffect 钩子在组件安装时调度 fetchposts，但前提是当前状态为“项目搭建网点我wcqh.cn空闲”。

检查状态以确定要呈现的内容（加载微调器、帖子列表或错误消息）。

第 2 步：将帖子列表添加到应用程序

更新主 app.js 文件以包含 postslist 组件：

// src/App.js

import React from react;

import PostsList from ./features/posts/PostsList;

function App() {

return (

</div>

);

}

export default App;

登录后复制

4。异步 thunk 的最项目搭建网点我wcqh.cn佳实践

避免组件中的繁重逻辑：通过分派 thunk 来处理异步逻辑，保持组件干净。

集中错误处理：处理切片中的错误，而不是在每个组件中重复逻辑。

标准化数据：考虑使用 normalizr 等库标准化状态形状，以有效管理复杂的数据结构。

记忆选择器：使用重新选择中的 createselector 来记忆选择器以获得更好的性能。

5。结论和后续步骤在这一部分中，我们探讨了如何使用 createasyncthunk 处理 redux toolkit 中的异步逻辑。我们学习了如何创建异步 thunk、处理不同的状态以及在组件中使用它。在下一部分中，我们将深入研究 rtk query——一个用于数据获取和缓存的强项目搭建网点我wcqh.cn大工具，可进一步简化 redux 开发。

敬请期待第三部分：rtk查询简介！_

以上就是完整的 Redux 工具包 – 异步逻辑（第 -2 部分）的详细内容，更多请关注青狐资源网其它相关文章！

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END