一、Middleware的由来

单一的state是存储在store中,当要对state进行更新的时候,首先要发起一个action(通过dispatch函数),action的作用就是相当于一个消息通知,用来描述发生了什么(比如:增加一个Todo),然后reducer会根据action来进行对state更新,这样就可以根据新的state去渲染View

当然上面仅仅是发生同步Action的情况下,如果是Action是异步的(例如从服务器获取数据),那么情况就有所不同了,必须要借助Redux的中间件Middleware。

官方的解释:Redux的中间件是在发起一个action至action到达reducer的之间提供的第三方扩展,中间件的使用在action和store.dispatch之间进行使用

二、redux-promise

store.dispatch的action的payload属性可以放promise对象

使用方法:

(1)、引入

import {createStore,applyMiddleware} from "redux";

import promiseMiddleware from "redux-promise-middleware";

(2)加入中间件

const store = createStore(reducer, applyMiddleware( promiseMiddleware() ) )

(3)、在action中编写异步action

注意:这个异步的action会传递过来两个type信息  第一个是ADD_ITEM_PENDING   第二个是ADD_ITEM_FULFILLED,当在ADD_ITEM_PENDING 我们可以做一个Loding动画,当ADD_ITEM_FULFILLED的时候我们可以将数据加载到页面上

(4)、组件中使用

学习地址:https://github.com/pburtchaell/redux-promise-middleware

【巷子】---middleware---redux-promise-middleware---【react】的更多相关文章

  1. [React] 12 - Redux: async & middleware

    Ref: Redux 入门教程(二):中间件与异步操作 这里只是简单地了解中间件的概念,对于异步,貌似之后要讲的saga更胜一筹. reducer计算新状态的策略: Action 发出以后,Reduc ...

  2. Scrapy框架学习(三)Spider、Downloader Middleware、Spider Middleware、Item Pipeline的用法

    Spider有以下属性: Spider属性 name 爬虫名称,定义Spider名字的字符串,必须是唯一的.常见的命名方法是以爬取网站的域名来命名,比如爬取baidu.com,那就将Spider的名字 ...

  3. Redux:with React(一)

    作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...

  4. [转] What is the point of redux when using react?

    As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think o ...

  5. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  6. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  7. redux 简介

    概述 Redux 本身是个极其简单的状态管理框架, 它的简单体现在概念少, 流程明确. 但是, 正是因为简单, 使用上没有强制的约束, 所以如果用不好, 反而会让状态管理更加混乱. 我觉得, 用好 R ...

  8. koa/redux middleware系统解析

    middleware 对于现有的一些框架比如koa,express,redux,都需要对数据流进行一些处理,比如koa,express的请求数据处理,包括json.stringify,logger,或 ...

  9. koa/redux middleware 深入解析

    middleware 对于现有的一些框架比如koa,express,redux,都需要对数据流进行一些处理,比如koa,express的请求数据处理,包括json.stringify,logger,或 ...

  10. 初识Redux Middleware

    前言 原先改变store是通过dispatch(action) = > reducer:那Redux的Middleware是什么呢?就是dispatch(action) = > reduc ...

随机推荐

  1. mastering elasticsearch

    概念: Term: 它是搜索的基本单位,其表现形式为文本中的一个词. Token: 它是单个Term在所属Field中文本的呈现形式,包含了Term内容.Term类型.Term在文本中的起始及偏移位置 ...

  2. Java中的this关键字老生常谈

    一.this的由来  this关键字就是获得调用当前方法对象的引用. 二.注意点 this关键字只能出现在方法内部,完成对调用该方法的对象的引用. 三.this关键字的三个用处 1.最主要的用处: 获 ...

  3. 远程办公的GitLab开源的员工手册:涵盖了公司价值观,内部沟通交流指南,开发流程,如何开会,写作风格指南,如何报销,如何请假,线上办公工具推荐等方方面面

    原文 :https://docs.gitlab.com.cn/ce/ 英文 :https://about.gitlab.com/handbook/ GitLab Community Edition G ...

  4. win都是数据更新

    1:一种新的类型: 枚举: 枚举是一种描述性的名称 定义一组有限的值,不能包含方法 对可能的值进行约束 枚举保证了赋值的合理性 2:   public enum Grader(枚举的名称){ Male ...

  5. HDU 1000

    A + B Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  6. 06 面向对象:多态&抽象类&接口&权限修饰符&内部类

    多态: /* 多态(polymorphic)概述 * 事物存在的多种形态 多态前提 * a:要有继承关系. * b:要有方法重写. * c:要有父类引用指向子类对象. * 成员变量 * 编译看左边(父 ...

  7. django额外参数的传递和url命名

    django额外参数的传递 path方法:path(route, view, kwargs=None, name=None) path方法可以传递入一个额外参数的字典参数(kwarg),字典里的值就会 ...

  8. 【BZOJ4552】【TJOI2016】【HEOI2016】排序

    经验还是不够…… 原题: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对 ...

  9. day11hadoop高可用和Hive

    PS:视频一直就是在演示   高可用(比较偏运维一点) PS:Active是对外提供服务的,standBy是从属备用的:但是他们是怎样保证同步的数据的呢?一个运行中zookeeper上的第三方那个工具 ...

  10. linux解压缩命令之unzip,tar(持续更新)

    unzip apache-tomcat-7.0.78.zip -d /usr/local/src/ 解压zip压缩包到/usr/local/src,-d就是指定解压路径的意思