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.jsimport { createslice, createasyncthunk } from '@reduxjs/toolkit';// async thunk to fetch posts from an apiexport 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.jsimport 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 = loading...
; } else if (status === 'succeeded') { content = ( - {posts.map((post) => (
- {post.title} ))}
{error}
; } return (posts
{content}说明：
useeffect 钩子在组件安装时调度 fetchposts，但前提是当前状态为“空闲”。
检查状态以确定要呈现的内容（加载微调器、帖子列表或错误消息）。
第 2 步：将帖子列表添加到应用程序
更新主 app.js 文件以包含 postslist 组件：
// src/App.jsimport React from 'react';import PostsList from './features/posts/PostsList';function App() { return ( );}export default App;
4。异步 thunk 的最佳实践
避免组件中的繁重逻辑：通过分派 thunk 来处理异步逻辑，保持组件干净。
集中错误处理：处理切片中的错误，而不是在每个组件中重复逻辑。
标准化数据：考虑使用 normalizr 等库标准化状态形状，以有效管理复杂的数据结构。
记忆选择器：使用重新选择中的 createselector 来记忆选择器以获得更好的性能。
5。结论和后续步骤
在这一部分中，我们探讨了如何使用 createasyncthunk 处理 redux toolkit 中的异步逻辑。我们学习了如何创建异步 thunk、处理不同的状态以及在组件中使用它。在下一部分中，我们将深入研究 rtk query——一个用于数据获取和缓存的强大工具，可进一步简化 redux 开发。
_
敬请期待第三部分：rtk查询简介！_
以上就是完整的 Redux 工具包 – 异步逻辑（第 -2 部分）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491281.html
微信扫一扫 
支付宝扫一扫 
