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 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...
随机推荐
- 学习lua-06,异常提示,错误处理
addNum = function(a, b) assert(type(a) == 'string','a必须是一个字符串') assert(type(b) == 'string','b必须是一个字符 ...
- 2- 用户登录表单拦截 UsernamePasswordAuthenticationFilter
/* * Copyright 2004, 2005, 2006 Acegi Technology Pty Limited * * Licensed under the Apache License, ...
- hadoop服务异常,磁盘坏道critical medium error,dev sdh,sector xxxx
运行spark之后,部分任务失败,排查查看操作系统日志(/var/log/message),发现磁盘坏道,导致服务异常.异常主要错误"critical medium error,dev sd ...
- ZooKeeper的主要应用场景
什么是Zookeeper ZooKeeper主要服务于分布式系统,可以用ZooKeeper来做:统一配置管理.统一命名服务.分布式锁.集群管理. 使用分布式系统就无法避免对节点管理的问题(需要实时感知 ...
- fread()函数读文本文件重复读最后一个字符问题【已解决】
对文本文件读写时遇到一个问题,fread()读所有内容的时候文件的最后一个字符总会重复读,我的代码如下: FILE* file = nullptr; fopen_s(&file, " ...
- 剑指 Offer II 动态规划
088. 爬楼梯的最少成本 class Solution { public: int minCostClimbingStairs(vector<int>& cost) { int ...
- [笔记]windows cmd常用命令
1.返回上一级目录 目前似乎没有直接的命令,参考 https://stackoverflow.com/questions/48189935/how-can-i-return-to-the-prev ...
- SpringBoot整合MyBatis-Plus详细使用方法
SpringBoot整合mp 一.添加依赖pom.xml <dependency> <groupId>mysql</groupId> <artifactId& ...
- Vue + Element table的@select方法获取当table中的id值都相同时,获取他们索引
先说下问题情况,原本通过双重forEach方法方法,遍历可以获取到被勾选中的索引. let arr = []val.forEach((val, index) => { this.TableDat ...
- django解决网站CORS前后端跨域问题
1.安装cors-headers⼯具 pip install django-cors-headers 2.安装cors-headers应⽤ # 注册应用 INSTALLED_APPS = [ 'd ...