react的action中异步操作遇到的问题

最新推荐文章于 2022-12-17 17:48:27 发布
最新推荐文章于 2022-12-17 17:48:27 发布
阅读量868 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35629054/article/details/106983564
版权

最近做了一个需求，就是一个很简单的tabs分页，大致是这个样子

在这里插入图片描述

我想将这个组件更加细化的抽出来做成更加容易扩展的组件，父组件只提供了子组件出现的x,y轴的坐标，其余的数据都由redux控制，虽然这样做过于笨重，但是这是个人尝试，在项目中当然是怎么轻量怎么来。

遇到的问题：
1.我想在页面初始化的时候就走接口获取tabs顶部的按钮名称以及对应的编码，并且利用的这个编码再去请求另一个接口第一次初始化对应的表格，简单来说就是页面初始化的时候需要走两个接口，而且这两个接口必须按照我想要的顺序去执行，然后我是这么做的，贴出代码

这个我想要第一个执行的接口，就是获取tabs各个按钮名称以及编码的接口
在这里插入图片描述

是这是我想要第二个执行的接口在这里插入图片描述
当然按照redux的规范，我们并不能在action中直接操作state，所以想在第一个方法执行结束直接获取state是不行的，那么我们就要考虑怎么让他们按照顺序执行，我的思路是：将第一个方法返回一个promise，然后利用then再来执行第二个函数，当然这一些列操作是在组件中完成的
在这里插入图片描述

以上我只为大家提供一种思路，实现这个需求很简单，但是怎么样实现它最合理，最简洁，大家多多思考
总结：
1、redux的action中可以使用promise来解决异步问题
2、只执行一次的方法或者请求，我们最好放在组件的componentDidMount中，请不要尝试放在getDerivedStateFromProps比较新旧porps或者state，相信我，你可能会让这个请求或者方法执行两次甚至多次，及时你根据一些判断限制了请求次数，也会让你的代码变得难维护

看完以上内容如果对你有所帮助，请给小编一个赞支持一下吧！

尼古拉斯二嘎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react简书项目学习笔记32在组件中调用action传参
MeiLuan_yahoho的博客
02-13 969
react中调用action传参时要通过函数的形式 例子如下： <div onClick={() => { handleChangePage(page, totalPage) }}>换一批</div> 注意不能直接写onclick=handleChangePage(page, totalPage),要写在新函数中 onClick={() =&am
详解redux异步操作实践
12-11
当一个action creator返回函数时，这个函数会被redux-thunk中间件调用，并传入`dispatch`和`getState`作为参数，使得我们可以在这个函数中执行异步操作，然后再dispatch相关的actions来更新store。 然而，`redux-...
react-redux 中异步action的解决方法
TTST_HTSN的博客
03-18 474
把网络请求放入action里面会出错 解决方式通过异步中间件 redux-thunk redux-sage redux-promise … 安装异步插件 npm install redux-thunk 在store.js 引入并使用 import {createStore,applyMiddleware} from 'redux' import thunk from 'redux-thu...
React18——setState变成异步——suspence组件懒加载结合异步数的传递
阿牛哥的博客
10-15 839
React18——setState变成异步——suspence组件懒加载结合异步数的传递
react总结之异步的action
my_love_download的博客
09-07 1213
开发中避免不了使用请求,这个时候就会涉及的处理异步的问题,在react中我们在使用action的时候遇到异步的问题一般会使用中间redux的中间件(applyMiddleware)来处理,使用起来也很简单,下面做一个简单的使用步骤 安装redux-thunk npm install redux-thunk 传入中间件 export default createStore(reducers, applyMiddleware(thunk)); 使用setTimeout在action中模拟异步请求 const
redux 案例 （求和）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
05-06 236
案例 react版 注意: this.setState({count:count+value1}) 需要1才能实现加减效果 否则就是字符串拼接 Count 组件 内容 import React, { Component } from 'react' export default class Count extends Component { state = { count: 0 } // 加 increment = () => { const { value } = thi
react-actioninreduxapplyMiddleware在调用链中触发action
08-14
在实际项目中，你可能还会遇到如`redux-thunk`、`redux-saga`等流行的中间件库，它们为处理异步逻辑提供了更高级的抽象。 至于`floor-produce-master`这个文件名，可能是某个项目或者示例的源码，但具体的内容与...
react-基于reduxsaga的异步处理方案
08-14
总结来说，Redux Saga是React应用中处理异步操作的强大工具，它与Redux配合使用，使得状态管理更加有序和可测试。DVA框架则进一步简化了这种模式，提供了更高效和简洁的项目结构。在`Teemo-master`项目中，你可以...
使用异步操作响应 useReducer
06-08
use-reducer-async React useReducer 与异步操作简介 React useReducer 本身不支持异步操作。 与 Redux 不同，它没有中间件接口，但钩子是可组合的。 这是一个用于扩展 useReducer 调度的小型库，以便调度异步操作...
react-封装reduxthunk异步请求样板代码
08-14
在React开发中，Redux是一个非常流行的管理应用状态的库，而Redux Thunk是Redux的中间件，用于处理异步操作。这个"react-封装redux-thunk异步请求样板代码"的资源提供了一个简化异步Action编写方式的方法，帮助...
React in Action (Convert PDF)
11-27
React in Action (Convert PDF), Publication Date: 2018-07-08
React中store、action和reducer之间的关系
qq_43952245的博客
11-27 3385
参考链接：别人写的不错的文章，可以进行参考借鉴一下 知乎：理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？ 简书：redux 终于搞明白store reducer action之间的关系 React 实践心得：react-redux 之 connect 方法详解 ...
react中Redux开启异步action
ChuanyangChen的博客
06-01 482
目的：想在action中实现方法调用的延迟⚠️：异步action不是必须要写的，完全可以在组件中写setTimeout()开启异步任务，等待异步任务结果后再去dispatch同步的action1⃣️ 安装中间件 2⃣️ 配置store在中录入以下配置 3⃣️ 创建action函数不再返回一般对象，而是一个函数，在函数中写异步任务 4⃣️ 在组件中的使用：
React-43：异步action的写法
臧小川的博客
08-29 201
安装redux-thunk redux-thunk store中使用action 引入redux-thunk，用于支持异步action 从redux中引入中间件库applyMiddleware 修改createStore的参数 // store.js //引入createStore，专门用于创建redux中最为核心的store对象 import {createStore,applyMiddleware} from 'redux' //引入为Count组件服务的reducer import countR
React学习24（redux异步action）
xiaojian044的博客
12-17 213
redux异步action
一个插件让你在 Redux 中写 promise 事半功倍
weixin_33766805的博客
01-31 493
Redux 的应用给我们开发带来了很多便利，让组件间交互不再那么复杂，但 Redux 也有它的短板，我们知道要通过 Redux 改变一个 state 需要定义 actionType→action→reducer，这使得有时候一个很简单的交互都需要写一堆代码，我们今天要介绍的这个小插件可以让这个工作变得更加简洁、优雅。 它就是：redux-promise-middleware，这是一个 Redux ...
React-异步action
TO_Web的博客
03-06 436
React-异步action 所谓异步简单来说就是一个返回的是一个函数 那同步简单来说就是一个Object的对象 再使用异步action的时候可能会有这个错误, 意思是你需要一个中间器去处理异步action, 所以下载一个插件, 再下面 1. 需要下载的插件, 用于异步action cnpm install redux-thunk -S // reducer.js const ASYNCFUN = () => { return (dispatch) => { setTimeout(()
案例：React+Redux使用异步Action实现加减
小李科技
10-23 1548
其实很早就已经接触react了，当时还看的是es5语法，本来js基础就不扎实，秉着初生牛犊不怕虎的精神去看了react，结果看了云里雾里，这种硬塞的知识过几天就全忘了，过了一段时间，想着有空了，就又去看了react，这次直接看的es6语法，看完后顺道看了react-redux，刚开始，很痛苦，本来react就已经不太容易理解了，再加上redux和react-redux，更加懵逼了，一个很简单的应用...
react redux toolkit异步函数
最新发布
05-25
React Redux Toolkit 提供了一个名为 `createAsyncThunk` 的工具函数来处理异步操作，它可以帮助我们更轻松地编写异步逻辑。 `createAsyncThunk` 的使用非常简单，我们只需要传入两个参数：一个字符串类型的 action 名称和一个异步函数。例如： ```javascript import { createAsyncThunk } from '@reduxjs/toolkit'; export const fetchUserById = createAsyncThunk( 'users/fetchByIdStatus', async (userId, thunkAPI) => { const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`); return response.json(); } ); ``` 在这个例子中，我们创建了一个名为 `fetchUserById` 的异步 action，它会发起一个网络请求，然后将返回的数据作为 payload 返回。 当我们调用 `fetchUserById` 时，Redux Toolkit 会自动创建三个 action：`fetchUserById/pending`、`fetchUserById/fulfilled` 和 `fetchUserById/rejected`。这些 action 会根据异步操作的状态分别被触发，我们可以在 reducer 中处理它们。 例如，我们可以在 reducer 中处理 `fetchUserById/pending` action，将 `loading` 状态设置为 `true`： ```javascript import { createSlice } from '@reduxjs/toolkit'; import { fetchUserById } from './actions'; const userSlice = createSlice({ name: 'user', initialState: { loading: false, user: null, error: null, }, reducers: {}, extraReducers: (builder) => { builder.addCase(fetchUserById.pending, (state) => { state.loading = true; }); builder.addCase(fetchUserById.fulfilled, (state, action) => { state.loading = false; state.user = action.payload; }); builder.addCase(fetchUserById.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }); }, }); export default userSlice.reducer; ``` 在这个例子中，我们在 `extraReducers` 中处理了三个 action，并根据它们的状态更新了 state。当 `fetchUserById/pending` 被触发时，我们将 `loading` 状态设置为 `true`；当 `fetchUserById/fulfilled` 被触发时，我们将 `loading` 状态设置为 `false`，并将返回的数据保存到 state 中；当 `fetchUserById/rejected` 被触发时，我们将 `loading` 状态设置为 `false`，并将错误信息保存到 state 中。 需要注意的是，`createAsyncThunk` 返回的是一个 Redux action creator，我们可以像普通的 action creator 一样调用它，并且将返回的 action 传递给 `dispatch` 函数来触发异步操作。例如： ```javascript import { useDispatch } from 'react-redux'; import { fetchUserById } from './actions'; function User(props) { const dispatch = useDispatch(); useEffect(() => { dispatch(fetchUserById(1)); }, [dispatch]); return <div>User Component</div>; } ``` 在这个例子中，我们使用 `useDispatch` 钩子获取 `dispatch` 函数，并在 `useEffect` 中调用 `fetchUserById` 来触发异步操作。注意，我们传递的参数是 `1`，这是我们要获取的用户的 ID。当异步操作完成时，Redux Toolkit 会自动触发相应的 action，并将返回的数据保存到 state 中，我们可以在组件中使用 `useSelector` 钩子来获取 state 中的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值