在redux中我们都是执行同步操作,如果我们想要执行异步操作,那么我们就需要依赖到中间件,具体的中间件的概念我就不描述了相信官方文档更详尽。现在就描述下具体的用法,就已我们项目中用到的最多的数据请求为例来进行描述。

  redux如果需要使用异步操作,那么就需要使用中间件,而redux自带着一些中间件的用法,在store中可以在createStore中传入我们的中间件,但在之前需要先引入对应插件applyMiddleware,以及下载执行异步操作的redux-thunk。

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';const store = createStore(
reducer,
  applyMiddleware(thunk)
) export default store;

在上面的代码中就是引入中间件的方式,但是现在我们就不能使用REDUX_DEVTOOLS浏览器插件在浏览器查看redux的状态变化,我么可以对他进行改造,参考https://github.com/zalmoxisus/redux-devtools-extension,其中就是REDUX_DEVTOOLS也是中间件的形式,通过了解后我们在对代码进行改造;

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose; const enhancer = composeEnhancers(
applyMiddleware(thunk),
);
const store = createStore(
reducer,
enhancer
)
export default store;

现在我们就能即使用thunk中间件来发异步请求,也能同时在浏览器中查看插件来观察redux状态变化。

***现在来说下redux-thunk他是怎么发挥它的作用,达到异步操作的(其实通过画图很好理解,我们学习react或者是redux一定要对他的执行逻辑清除)。

我们的action都是通过返回一个对象,接着执行对应的操作,但是我们添加了redux-thunk中间件后,action也可以返回一个函数,我们的异步操作就在这里面来执行。

export const init_list_action =() => {
return (dispatch) => {
axios.get(' http://www.mocky.io/v2/5cd3950535000070007a4f81').then(res => {
dispatch(init_list(res.data))
dispatch(census_check_num())
})
}
}

返回一个函数,在函数中发起请求异步操作,之后的store调用发起这个action时就会执行里面的函数,发起请求得到对应数据,得到数据后我们就还需要再次发起action来将数据添加到state中,这样我们的这个异步操作就完成了!现在贴上涉及到操作的代码:

import { connect } from 'react-redux';
import List from '../component/List';
import { delete_todo_item, check_box_handler, census_check_num, init_list_action } from '../store/actionCreator';
import React,{ Component } from 'react'; class ListItem extends Component {
render() {
return (
<List data={this.props}></List>
)
}
componentDidMount() {
this.props.initList()
}
}
const mapStateToProps = (state, ownProps) => {
return {
list: state.list
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
checkboxHandler: (index) => {
dispatch(check_box_handler(index));
dispatch(census_check_num());
},
deleteTodoItem: (index) => {
dispatch(delete_todo_item(index));
dispatch(census_check_num());
},
initList: () => {
dispatch(init_list_action())
}
}
} const listItem = connect(
mapStateToProps,
mapDispatchToProps
)(ListItem)
export default listItem;

上面的是一个list的组件,通过react-redux对其进行了操作,在组建的componentDidMount周期调用初始化列表!

这里插一句,为了完成异步操作,我这里使用了Mocky来实现接口,https://www.mocky.io/

最后得到的页面为:

其他的所有起步操作请求都和这个大同小异,redux存在很多中间件,可以自行去研究!该demo里面我直接使用了react-redux来配合redux!不懂react-redux的可以先不管,该方法在redux同样适用!

redux中间件来执行异步操作的更多相关文章

  1. Redux 中间件的执行顺序理解

    Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别: <!DOCT ...

  2. Redux 中间件和异步操作

    回顾一下Redux的数据流转,用户点击按钮发送了一个action,  reducer 就根据action 和以前的state 计算出了新的state, store.subscribe 方法的回调函数中 ...

  3. redux中间件和redux-thunk实现原理

    redux-thunk这个中间件可以使我们把这样的异步请求或者说复杂的逻辑可以放到action里面去处理,redux-thunk使redux的一个中间件,为什么叫做中间件 我们说中间件,那么肯定是谁和 ...

  4. 理解 Redux 中间件机制

    Redux 的 action 是一个 JS 对象,它表明了如何对 store 进行修改.但是 Redux 的中间件机制使action creator 不光可以返回 action 对象,也可以返回 ac ...

  5. Redux:中间件

    redux中间件概念 比较容易理解. 在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中. 所谓中间 ...

  6. redux中间件

    Redux 中间件 什么是中间件? 中间件本质上就是一个函数,Redux允许我们通过中间件的方式,扩展和增强Redux应用程序,增强体现在对action处理能力上,之前的计数器与弹出框案例中.acti ...

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

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

  8. Koa 中间件的执行

    Node.js 中请求的处理 讨论 Koa 中间件前,先看原生 Node.js 中是如何创建 server 和处理请求的. node_server.js const http = require(&q ...

  9. Redux 中间件与函数式编程

    为什么需要中间件 接触过 Express 的同学对"中间件"这个名词应该并不陌生.在 Express 中,中间件就是一些用于定制对特定请求的处理过程的函数.作为中间件的函数是相互独 ...

随机推荐

  1. 大数据笔记(三十一)——SparkStreaming详细介绍,开发spark程序

    Spark Streaming: Spark用于处理流式数据的模块,类似Storm 核心:DStream(离散流),就是一个RDD=================================== ...

  2. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or repr

    在数据库连接配置文件中加入以下: 解决办法为在application文件中添加serverTimezone=UTC spring.datasource.url=jdbc:mysql://localho ...

  3. ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)G GCD Guessing Game

    G: 要你去才Paul的年龄,Paul的年龄在1~n之间,你每猜一个Paul会告诉你,你猜的这个数和他年龄的gcd,问在最坏情况下最少要猜多少次. 题解: 什么是最坏情况,我们直到如果他的年龄是1的话 ...

  4. 配置OpenLDAP,Java操作LDAP,DBC-LDAP进访问

    LDAP快速入门 1. LDAP简介 LDAP(轻量级目录访问协议,Lightweight Directory Access Protocol)是实现提供被称为目录服务的信息服务.目录服务是一种特殊的 ...

  5. html上传文件

    不太懂Html 做备用 html的文件上传分两个 第一个是Html文件 浏览器加载用的 另一个是PHP文件 处理上传文件的 下面是Html文件 叫index.html <html> < ...

  6. VSCode - 使用 WSL(Windows Subsystem for Linux)

    一开始我是只将 VSCode 集成的终端改成 WSL 的 Bash,结果发现内置的 GIt 用的还是 Windows 的 Git,Git Hooks 用的 Windows 的环境,上网搜了一下发现有很 ...

  7. leetcode 441.排列硬币(python)

    1.题目描述 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范 ...

  8. Windows环境下Mysql 5.7读写分离简单记录

    一.目的 本文记录了在Windows环境中,mysql数据库读写分离配置过程. 二.准备: Master机器:Windows 10 虚拟机,IP:192.168.3.32 Slave机器:Window ...

  9. c++ 事件回调 java

    #pragma once #ifdef __cplusplus extern "C" { #endif typedef void(*sig_t)(int); int FirstEl ...

  10. 手把手教你搭建一个 Elasticsearch 集群

    为何要搭建 Elasticsearch 集群 凡事都要讲究个为什么.在搭建集群之前,我们首先先问一句,为什么我们需要搭建集群?它有什么优势呢? 高可用性 Elasticsearch 作为一个搜索引擎, ...