概念

redux的中间件就是用来处理reducer和actions之间应用,可以处理reducer和actions之间的数据流,实现如异步action,日志输出等操作.

在redux中通过applyMiddleware方法使用中间件

常用的异步处理action中间件有redux-thunk,redux-sage.

redux-logger:提供日志输出

使用例子

redux-thunk的使用例子

//store/index.js文件

import reduxThunk from "redux-thunk";
const store = createStore(reducer,composeWithDevTools(applyMiddleware(reduxThunk)));

//store/reducer纯函数

const defaultState={
  login:{}
}
export default (state=defaultState,actions)=>{
  switch(actions.type){
    case 'LOGIN':
      ...
    }
  return state;
}

//组件发送action

import {LoginActions} from '@api/login';

import {connect} from 'react-redux';

<Form

  name="normal_login"

  className="login-form"

  initialValues={{ remember: true }}

  onFinish={this.props.onFinish}

>

const mapDispatchToProps=(dispatch)=>({

  // 提交内容{username:,password:}

  onFinish(values){

    dispatch(LoginActions(values))

  }

})

export default connect(null,mapDispatchToProps)(LoginInput)

//redux-thunk定义异步的action

import api from './api';
import http from '@utils/http.js';
// redux-thunk异步:让action是一个函数,并且返回一个函数,返回函数内部有dispatch参数,通过内部函数结合async+await实现异步
//LoginActions是一个action,外部需要dispatch调用
export const LoginActions=(params)=>{
  //请求后台接口
  return async (dispatch)=>{
    let result=await http.post(api.login,params);
    dispatch({
      type:'LOGIN',
      data:result
    })
  }
}

redux中间件的理解的更多相关文章

  1. 3.3 理解 Redux 中间件(转)

    这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 appl ...

  2. 理解 Redux 中间件机制

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

  3. redux middleware 的理解

    前言 这几天看了redux middleware的运用与实现原理,写了一个百度搜索的demo,实现了类似redux-thunk和redux-logger中间件的功能. 项目地址:https://git ...

  4. Redux:中间件

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

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

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

  6. 【React全家桶入门之十三】Redux中间件与异步action

    在上一篇中我们了解到,更新Redux中状态的流程是这种:action -> reducer -> new state. 文中也讲到.action是一个普通的javascript对象.red ...

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

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

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

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

  9. react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)

    第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...

随机推荐

  1. JS获取链接中的参数

    /*获取当前页面链接中的参数*/ function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + ...

  2. 转载:URL链接中的不同用处

    ,井号:表示网页中的一个位置,被称之为锚点,常用于某个网页间不同位置的跳转,简单的说就是在一个网页中,URL 不变的情况下,通过添加"#buy"的字符在 URL 最后可以跳转到当前 ...

  3. Serval and Parenthesis Sequence CodeForces - 1153C

    题目大意:一个字符串只含有? ( ),?可以变成 ) 或者 ( ,将字符串中所有的?变成) 或者 ( 使得字符串合法. 合法就是让括号配对,并且不可以提前结束比如:()()这样是不合法的. 题解:既然 ...

  4. python做个谷歌内核浏览器

    源码: import sys,os os.chdir(os.path.dirname(os.path.abspath(__file__))) from PyQt5.QtGui import * fro ...

  5. 教你如何入手用python实现简单爬虫微信公众号并下载视频

    主要功能 如何简单爬虫微信公众号 获取信息:标题.摘要.封面.文章地址 自动批量下载公众号内的视频 一.获取公众号信息:标题.摘要.封面.文章URL 操作步骤: 1.先自己申请一个公众号 2.登录自己 ...

  6. Windows10 下安装SourceTree 跳过注册 Bitbucket

    前提:安装Git 下载Windows系统可执行文件SourceTreeSetup-3.1.3.exe 双击安装,会出现如下界面: 关闭这个界面 C:\Users\当前用户文件夹\AppData\Loc ...

  7. 22-Java-Hibernate框架(二)

    Hibernate的了解.Hibernate的搭建.Hibernate的基本使用流程等内容请阅读21-Java-Hibernate(一) 五.Hibernate的Query查询接口(重中之重) 1.H ...

  8. kafka消息分区机制原理

    背景 kafka如何支撑海量消息的集中写入? 答案就是消息分区. 核心思想是:负载均衡,采用合适的分区策略把消息写到不同的broker上的分区中: 其它的产品中有类似的思想. 比如monogodb, ...

  9. C++头文件问题

    自己定义的头文件必须要用“***.h”系统头文件必须要用<***.h>stdafx.h 必须放在所有头文件的最前面(如果不放,debug版本没有问题:release版本有问题,会报错)

  10. 用多线程,实现并发,TCP

    首先,开启新的线程,是不会新开辟内存空间的,即,子线程和主线程 都在同一个进程里,也就是主进程里,用os.pid(),os.ppid() 服务器: 方式一:Thread实例化 def task(con ...