一、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. Maven项目的结构分析

    上图为简单的Maven结构,其中用src/main/resources写项目配置文件,src/main/java写项目的java文件,src/test/java写java测试类文件.

  2. Android Native Hook技术(二)

    Hook技术应用 已经介绍了安卓 Native hook 原理,这里介绍 hook 技术的应用,及 Cyida Substrate 框架. 分析某APP,发现其POST请求数据经过加密,我们希望还原其 ...

  3. php防止sql注入的方法(转)

    [一.在服务器端配置] 安全,PHP代码编写是一方面,PHP的配置更是非常关键. 我们php手手工安装的,php的默认配置文件在 /usr/local/apache2/conf/php.ini,我们最 ...

  4. Rodrigues(罗德里格斯)旋转公式推导

    1. 2.推导过程:我们的目的是求得vrot,所以应该求得v||和vrot在垂直于k方向的投影向量. 其中, 俯视图看: 此外,另一种表示方法为: R可以看作旋转矩阵.

  5. arcgis server备份还原过程

    一.备份过程 1.找到已经安装的arcgis server安装目录,并找到备份工具: 2.快捷键win + R启动cmd,将备份工具文件拖入cmd窗口,enter 3. 通过backup.py脚本进行 ...

  6. github如何删除新建仓库(致新手)

    github作为开发人员的必备用具.那么,作为一个新手如何删除github中建立的仓库呢? 1.以删除My test为例

  7. PTA——龟兔赛跑

    PTA 7-39 龟兔赛跑 #include <stdio.h> int main () { ,turtle=,minute,rest=-,run=; //rest为0或负时,兔子休息,r ...

  8. Linux 命令的20个实用范例,入门必看!

    Tips: 达内Linux云计算免费课程火热抢报中,点击文末“阅读原文”快速抢! Linux中一个基本命令是ls.没有这个命令,我们会在浏览目录条目时会遇到困难.这个命令必须被每个学习Linux的人知 ...

  9. java 类方法和实例方法 以及 类变量和实例变量 各种区别

    我们已经知道类体中的方法分为实例方法和类方法两种,用static修饰的是类方法.二者有什么区别呢?当一个类创建了一个对象后,这个对象就可以调用该类的方法. 当类的字节码文件被加载到内存时,类的实例方法 ...

  10. 【BZOJ3244】【UOJ#122】【NOI2013]树的计数

    NOI都是酱的题怎么玩啊,哇.jpg 原题: 我们知道一棵有根树可以进行深度优先遍历(DFS)以及广度优先遍历(BFS)来生成这棵树的DFS序以及BFS序.两棵不同的树的DFS序有可能相同,并且它们的 ...