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 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...
随机推荐
- elementUI合并单元格
<el-table :data="tableDataFormat" border :header-cell-style="{background:'#FAFAFA' ...
- HIVE- 各年逐月累加函数
select year_flag,month_flag,field,SUM(field) OVER (PARTITION BY year_flag ORDER BY month_flag)from t ...
- WOW事件大全(翻译对照)
魔兽世界(WOW)插件开发事件大全 ACHIEVEMENT_EARNED 取得的成就 ACHIEVEMENT_SEARCH_UPDATED 已更新成就搜索 ACTIONBAR_HIDEGRID 动作条 ...
- ubuntu16.04编译LAPACK3.7.1出错
NEP: Testing Nonsymmetric Eigenvalue Problem routines ./EIG/xeigtstz < nep.in > znep.out 2> ...
- (0409) Pycharm 的设置--参数设置(运行.py文件带参数,例如argument) 比如: demo.py -prj xxx
1) https://www.cnblogs.com/yksgzlyh/p/10221960.html 点击"Run"菜单下的"Edit Configurations. ...
- 从main_phase跳回reset_phase的方式
在main_phase中调用: phase.jump(uvm_reset_phase::get()); 注意需要防止进入死循环.
- 【git】3.1git分支-分支简介
资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%AE%80%E4%BB%8B ...
- Java高级助教工作总结
一.助教工作的具体职责和任务 1.帮助老师在云班课上发布作业 2.解答同学们的问题 3.批改同学们的作业,并了解同学们的学习情况 4.在qq群中发布通知,收集同学们的一些意见 二.助教工作的每周时长和 ...
- BUUCTF-[GXYCTF2019]Ping Ping Ping
一道命令执行题目 一.基础知识 Linux shell特殊字符(参考链接) [;]作为多个命令语句的分隔符(Command separator [semicolon]). 要在一个语句里面执行 ...
- Mybatis开发之mapper代理实现自定义接口(常用)
Mybatis开发之mapper代理实现自定义接口(常用) 通过mapper代理实现自定义接口 自定义接口,接口里面定义定义相关的业务方法 编写方法相对应的Mapper.xml. 定义完接口后,Map ...