redux中间件,用来处理异步action

返回 一个函数  内部函数接收存储方法dispatchgetState参数

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初步使用的更多相关文章

  1. Redux thunk中间件

    redux-thunk https://github.com/reduxjs/redux-thunk Why Do I Need This? Thunks are the recommended mi ...

  2. Redux 和 Redux thunk 理解

    1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...

  3. React项目使用Redux

    ⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...

  4. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  5. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  6. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  7. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  8. [转] 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 ...

  9. 数据流程redux学习(一)

    思考题: react+redux开发这么一个原型,要怎么开发? 整个redux流程的逻辑非常清晰,数据流是单向循环的,就像一个生产的流水线: store(存放状态) -> Container(显 ...

  10. 聊一聊 redux 异步流之 redux-saga

    让我惊讶的是,redux-saga 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...

随机推荐

  1. Mac安装Nvm Node开发环境

    1.什么是nvm? nvm 是 Mac 下的 node 管理工具,可以在同一台电脑上安装多个Node.js版本灵活切换. 2.安装前的准备 a. 卸载已安装到全局的 node/npm  如果之前是在官 ...

  2. 安装 Harbor

    安装Harbor先决条件 https://goharbor.io/docs/2.6.0/install-config/installation-prereqs/ 1.安装docker 参考docker ...

  3. Ubuntu子系统shell脚本自动连接xfce4界面

    脚本功能 命令行参数指定ip连接/获取ifconfig中的本地ip连接 修改.bashrc #!/bin/bash net_dev="wifi0" #默认的设备名 FALSE=&q ...

  4. JavaScript案例:短信验证码倒计时

    展示效果: 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 【GENERAL FRAMEWORK】总框架——持续更新

    引: 鉴于目前挖的坑较多,未防止某些即将长期更新的博文出现烂尾,特设此框架 1.蓝桥杯(完结)         1.[蓝桥杯单片机组]LED.蜂鸣器与继电器--138-573的外设操作         ...

  6. Gitbook部署之nodejs踩坑

    title: Gitbook部署之nodejs踩坑 date: 2020-11-06 16:34:30 summary: Gitbook部署和NVM的使用.hexo失效 Gitbook部署之nodej ...

  7. Ubuntu截图软件

    Ubuntu截图软件 方法一:使用系统自带的快捷键 可以将其修改为自己习惯的快捷键 如图: 方式二:使用软件ksnip GitHub: https://github.com/ksnip/ksnip 安 ...

  8. css 卡片hover效果

    .card { height: 430px; width: 100%; background:#ffffff; border:1px solid #eaeefb; border-radius:5px; ...

  9. SpringBoot为什么这么火?

    1.  总的设计原则是""默认大于配置"" 2. Starter机制,开箱即用,默认的配置和依赖都是默认加载的 3. SpringBoot是Spring的子类, ...

  10. python3 - Django3.2框架

    提示:web开发已有php.java,而python在这方面,没有优势,python的优势在于:爬虫.人工智能.大数据分析等,python在web开发这方面,没必要掌握:版本:稳定版本:3.2(py3 ...