redux-thunk初步使用
redux中间件,用来处理异步action
返回 一个函数 内部函数接收存储方法dispatch
和getState
参数
demo:
import { GET_ONLINE_STATUS, SET_ONLINE_STATUS} from './action_type'
import { changestatus, sysuserstatus } from '@/api'
import { message } from 'antd';
const getOnlineStatusAction = (val)=>{ //action
return {
type:GET_ONLINE_STATUS,
playload:{
text:val
}
}
} export const getOnlineStatus = (params)=>{
return (dispatch, getState)=>{ //返回 thunk 函数
sysuserstatus(params).then(res=>{
if(res.Ret === 200){
dispatch(getOnlineStatusAction(res.Status))
}
})
}
} //组建中使用
const mapStateToProps = (state, ownProps) => ({
status:state.handleOnlineStatus.onLineStatus //用户在线状态(state.handleOnlineStatus 此处这样用是因为reducer中使用了redux中的combineReducers()函数)
})
const mapDispatchToProps = {
getOnlineStatus,
setOnlineStatus
}
@connect(mapStateToProps,mapDispatchToProps)
class{}
redux-thunk初步使用的更多相关文章
- Redux thunk中间件
redux-thunk https://github.com/reduxjs/redux-thunk Why Do I Need This? Thunks are the recommended mi ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- React项目使用Redux
⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...
- react+redux教程(七)自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...
- Redux状态管理方法与实例
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- [转] How to dispatch a Redux action with a timeout?
How to dispatch a Redux action with a timeout? Q I have an action that updates notification state of ...
- 数据流程redux学习(一)
思考题: react+redux开发这么一个原型,要怎么开发? 整个redux流程的逻辑非常清晰,数据流是单向循环的,就像一个生产的流水线: store(存放状态) -> Container(显 ...
- 聊一聊 redux 异步流之 redux-saga
让我惊讶的是,redux-saga 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...
随机推荐
- 激光雷达ldlidar communication is abnormal.
查看串口设置是否正常,可以通过cat /dev/ttyS4查看是否有数据以确定所接的串口是否正确
- k8s 1.20.5(补充)
1.根据前面1.15.0补充 2.初始化操作 selinux swap firewall关闭防火墙 swapoff -a 禁用交换空间 vim /etc/sysctl.d/k8s.conf net.b ...
- GIT笔记汇总
Git的存储方式: 元空间的存储方式 SVN存储方式: 文档数据库存储类似于 K -V存储 文件版本迭代 Copy ------------------------------------------ ...
- Linux下设置目录或文件可读写,但不可以删除权限
例如:现在/home目录下有 :目录 data 和 文件 test.txt (1)设置/home/test.txt可读写但是不可以删除命令(文件设置): sudo chattr +a /home/te ...
- Java笔记_this关键字_HomeWork(5 - 9 题)
第五题 /** * @ClassName HomeWork05 * @Description TODO * @Author Orange * @Date 2021/4/25 10:09 * @Vers ...
- java开发微信APP支付
直接上代码 String nonce_str=WXPayUtil.generateNonceStr(); //WXPayUtil微信自己有的,自己下载,这里是生成随机字符串,下载地址(下载java的里 ...
- vue获取不到页面图片实际宽高
在某些情况下需要页面图片的宽高,使用Image获取加载图片获取图片宽高时为0,是因为图片未加载完返回宽高为0 如果未获取到宽高需要使用定时器定时获取图片,直到获取到后再清除定时器 示例代码: // n ...
- Android使用volley发送带参数的post请求
用参数方式可以解决E/Volley: [777] BasicNetwork.performRequest: Unexpected response code 500 for XXXXX 1.Strin ...
- Docker CLI docker build 常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...
- 第二周day7
第二周day7,星期天 所用时间:0 代码量:0 博客量:0 所学知识:提高社交能力,多锻炼.