react调用model层的接口(dispatch)在组件中获取接口返回状态

最新推荐文章于 2023-09-22 15:56:58 发布
最新推荐文章于 2023-09-22 15:56:58 发布
阅读量2.8k 收藏 3
点赞数 1
分类专栏： React 文章标签： react dispatch model
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanhuan03/article/details/112743002
版权

我们调用model层的接口，然后在组件中获取接口返回的数据，逻辑通常是：

在model层写好了逻辑，去获取或者计算接口返回数据，然后组件再引入这个model层中的数据，在组件中dispatch这个接口就行

但是我现在在组件中调用这个接口后，我要在dispatch({}).then(res => { 在这里面进行code码状态判断 })，那我就要在这then里面能获取到code这个返回字段：
在这里插入图片描述

在model层把这个字段return回去，就可以了
慢半拍、
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React及时更新状态
Lachesis_的博客
08-20 957
问题： 在dispatch请求接口数据 或者 更新state状态的时候，更新不及时，导致后方代码对该数据进行操作时出现错误。 做法： //1 在你想及时更新的代码外层套一个setTimeout，时间设置为0 该方法将内代码放在进程的最后执行，执行完毕后才进行下一步操作。 setTimeout(()=>{ this.setState({ }) this.props.dispatch({ }) },0) //2 状态更新之后，在后方使用新状态的地方重新获取数据（在页面不刷新的状态下，通过重新this
react学习(21)---接口加回调显示
歌谣的博客
07-15 470
this.props.dispatch({ type: 'activity/addActivityPopup', payload: params, callback: (res) => { if (res.returnCode === 0) { message.success('新增成功'); } else { message.er...
通俗易懂的React事件系统工作原理
grooyo的博客
11-16 778
React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。合成事件对象很有意思，一开始听名字会觉得很奇怪，看到英文名更奇怪， 实际上合成事件的意思就是使用原生事件合成一个 React 事件， 例如使用原生click事件合成了。
dva中dispatch函数实现异步回调函数的方式
qq_43681850的博客
02-05 3702
#关于 dva中dispatch函数实现异步回调函数的方式 1.通过promise函数实现 这里先给出index.js 和modal模块的实现 services模块不需要做处理 //index.js import { useEffect } from 'react'; function index(props){ const {dispatch} = props; // useEffect 保证只会在第一次渲染时运行 useEffect(() =&g
React中的dispatch()
czlj1998的博客
09-22 3405
reducer函数会根据action的类型来更新store中的状态，并返回一个新的状态对象。Redux会自动将新的状态对象与旧的状态进行比较，并更新组件的状态或重新渲染相应的组件。函数，我们可以在React组件中发起状态更新的请求，而不需要直接操作store或组件的状态。这种方式可以帮助我们保持组件的纯粹性和可重用性，同时将状态的管理集中在Redux中，使代码更加清晰和可维护。它是Redux中的一个核心概念，用于将action传递给store，从而触发相应的状态更新。函数是Redux提供的一个方法，
在组件中触发Dva的diapatch之后，models中的数据改变，但是组件并没有及时重新渲染
weixin_51719919的博客
03-01 1026
众所周知，使react组件重新渲染的三种方式： 1、setState() 2、props发生变化 3、forceUpdate() 但是今天遇到一个问题让我涨了新知识！ 项目中使用dva.js轻量级的应用框架，在组件中通过dispatch触发model中数据改变，调用reducers中的函数返回需要改变的数据，model数据确实已经发生改变，在组件中也通过this.porps，正确获取到数据修改前的状态，但是修改之后并没有获取到，写在componentDidUpdata里面也没有正确输出，百度查到说这个pro
React+Redux组件化那些事-willliang.zip
10-25
在React应用中结合使用Redux，可以帮助解决组件之间状态管理的复杂性。Redux提供了一种方式来协调多个组件之间的数据流，使得状态可以在应用的不同部分之间共享。Redux的中间件机制也允许我们插入额外的功能，如日志...
react+redux美团案例
最新发布
12-29
在本“react+redux美团案例”中，我们将深入探讨如何使用React.js库和Redux状态管理框架来构建一个类似于美团的应用。React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适用于构建可复用和模块化的...
react-redux-tutorial：react-redux-tutorial中文，目录和代码示例
02-19
你还将学习如何使用`connect()`函数从React组件中获取state和dispatch actions，以及如何使用`mapStateToProps`和`mapDispatchToProps`函数进行数据映射。 此外，"React + Redux系列教程（续）"可能会进一步深入到...
react-基于reduxsaga的异步处理方案
08-14
在React开发中，管理应用程序的状态是一项关键任务，特别是在大型复杂应用中。Redux是一个流行的状态管理库，它提供了一种集中式存储模型来管理和更新组件的状态。然而，对于异步操作，如API调用或定时器，Redux本身...
React入门之model请求数据,清晰明了,一看就会
Aeporn的博客
03-07 1703
项目基本结构 一.接口 services.js ,模块 models.js ,HTML页面 1.第一种方式-三者同级 2.第二种方式-子级 二.接口配置-services import { get, post } from '@/utils/request'; // get请求, 获取列表 export const getList = (params) => { return get(`/api/demo/list`, params); }; // post请求,获取列表 export
react+dva 全局model中异步获取数据state在组件中取不到值
a541967687的博客
08-04 2524
先上结论，不是取不到，是写法有问题。 全文分4部分，1是问题描述，2是一开始的解决想法（错误做法），3是问题产生原因的思考，4是正常解决方法。只想看结论直接跳4 1.问题描述 　　接触react dva一个月，和同事都不算熟悉框架。在修改、使用同事的ui组件时，想用全局model保存的state来给组件state一个初始值，但组件中取不到登录后异步获取的用户信息。 　　在组件co...
react中dispatch_通过一个例子看看React是如何进行数据通信的第4篇
weixin_29072299的博客
01-07 7942
点击蓝字 关注我们本专栏主要讲讲React中数据通信的几种方式：通过一个例子看看React是如何进行数据通信的-第1篇--props和事件回调通过一个例子看看React是如何进行数据通信的-第2篇--Context对象通过一个例子看看React是如何进行数据通信的-第3篇--useContext通过一个例子看看React是如何进行数据通信的-第4篇--Redux随着 JavaScri...
React中Dispatch
m0_49471668的博客
08-31 3631
发生了一些事情，我们希望 store 知道这件事。Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应。store 将执行所有 reducer 函数并计算出更新后的 state，调用。Redux store 有一个方法叫。可以获取新 state。...
React中在javascript函数中调用dispatch函数
enjoy.day
06-22 4083
环境 React(16.13.0)+antd(4.3.4)+redux(7.2.0) 步骤 导出store模块，之后在外部调用时导入模块即可使用相关函数。 // store.js import { createStore } from 'redux' export default createStore(reducers) // somefile.js import store from './store' store.dispatch(someAction) 以上来自网络 但是我在实际使用中，使
dva的dispatch回调，effects返回请求参数
热门推荐
西风XF的博客
09-12 4万+
// 业务中的请求 const params = { /* 参数 */ } new Promise((resolve) => { this.props.dispatch({ type: 'GiftRequest/changeGiftState', payload: { resolve, ...
React整体流程
咸鱼的星空
03-29 1万+
文章地址：http://react-china.org/t/react-redux/9072 react的组件化 react的一个组件很明显的由dom视图和state数据组成，两个部分泾渭分明。state是数据中心，它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别，没了Controller控制器，那用户交互怎么处理，数据变化谁来管理？然而这
React开发遇到的dispatch被传入属性的问题
weixin_39531373的博客
12-14 3844
发现组件中有dispatch属性。奇怪，后检测发现在使用connect redux时 export default connect(mapStateToProps)(Controls); 后修改为： export default connect(mapStateToProps, () => ({}) // omit dispatch prop )(Controls); 即可。 具体...
dispatch callback ant design pro 网络请求回调函数
a_靖的博客
11-21 4370
index.jsx 代码解析：在组件初次渲染时调用 model 中 命名空间为 a_models 的 getData 网络请求，传了一个patload 参数和 callback 回调函数过去，然后通过 this.setState ()更新视图的 state。 import { Form, Tabs,Affix, Button,Input,Table } from 'antd'; i...
react 用dispatch进行接口调用
06-13
在React中使用dispatch进行接口调用，通常需要借助redux-thunk中间件来处理异步操作。下面是一个简单的例子： ```javascript // 定义一个异步action creator export const fetchUserData = () => { return async (dispatch, getState) => { dispatch({ type: 'FETCH_USER_DATA_REQUEST' }); try { const response = await fetch('/api/user'); const data = await response.json(); dispatch({ type: 'FETCH_USER_DATA_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'FETCH_USER_DATA_FAILURE', payload: error }); } }; } // 在组件中使用dispatch调用异步action creator import { connect } from 'react-redux'; import { fetchUserData } from './actions'; class UserPage extends React.Component { componentDidMount() { // 调用异步action creator this.props.fetchUserData(); } render() { // 根据store中的状态渲染组件 const { isLoading, userData, error } = this.props; if (isLoading) { return <div>Loading...</div>; } else if (error) { return <div>Error: {error.message}</div>; } else { return ( <div> <h1>{userData.name}</h1> <p>{userData.bio}</p> </div> ); } } } const mapStateToProps = state => ({ isLoading: state.isLoading, userData: state.userData, error: state.error, }); const mapDispatchToProps = { fetchUserData, }; export default connect(mapStateToProps, mapDispatchToProps)(UserPage); ``` 在上面的例子中，fetchUserData是一个异步action creator，它返回一个函数，这个函数接收两个参数：dispatch和getState。在函数内部，我们可以使用dispatch方法来分发多个同步action，以更新store中的状态。在组件中，我们通过connect函数将fetchUserData方法映射为props属性，然后在componentDidMount中调用该方法，以触发异步操作。当异步操作完成后，根据store中的状态渲染组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值