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 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...
随机推荐
- Mac安装Nvm Node开发环境
1.什么是nvm? nvm 是 Mac 下的 node 管理工具,可以在同一台电脑上安装多个Node.js版本灵活切换. 2.安装前的准备 a. 卸载已安装到全局的 node/npm 如果之前是在官 ...
- 安装 Harbor
安装Harbor先决条件 https://goharbor.io/docs/2.6.0/install-config/installation-prereqs/ 1.安装docker 参考docker ...
- Ubuntu子系统shell脚本自动连接xfce4界面
脚本功能 命令行参数指定ip连接/获取ifconfig中的本地ip连接 修改.bashrc #!/bin/bash net_dev="wifi0" #默认的设备名 FALSE=&q ...
- JavaScript案例:短信验证码倒计时
展示效果: 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 【GENERAL FRAMEWORK】总框架——持续更新
引: 鉴于目前挖的坑较多,未防止某些即将长期更新的博文出现烂尾,特设此框架 1.蓝桥杯(完结) 1.[蓝桥杯单片机组]LED.蜂鸣器与继电器--138-573的外设操作 ...
- Gitbook部署之nodejs踩坑
title: Gitbook部署之nodejs踩坑 date: 2020-11-06 16:34:30 summary: Gitbook部署和NVM的使用.hexo失效 Gitbook部署之nodej ...
- Ubuntu截图软件
Ubuntu截图软件 方法一:使用系统自带的快捷键 可以将其修改为自己习惯的快捷键 如图: 方式二:使用软件ksnip GitHub: https://github.com/ksnip/ksnip 安 ...
- css 卡片hover效果
.card { height: 430px; width: 100%; background:#ffffff; border:1px solid #eaeefb; border-radius:5px; ...
- SpringBoot为什么这么火?
1. 总的设计原则是""默认大于配置"" 2. Starter机制,开箱即用,默认的配置和依赖都是默认加载的 3. SpringBoot是Spring的子类, ...
- python3 - Django3.2框架
提示:web开发已有php.java,而python在这方面,没有优势,python的优势在于:爬虫.人工智能.大数据分析等,python在web开发这方面,没必要掌握:版本:稳定版本:3.2(py3 ...