【巷子】---middleware---redux-promise-middleware---【react】
一、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】的更多相关文章
- [React] 12 - Redux: async & middleware
Ref: Redux 入门教程(二):中间件与异步操作 这里只是简单地了解中间件的概念,对于异步,貌似之后要讲的saga更胜一筹. reducer计算新状态的策略: Action 发出以后,Reduc ...
- Scrapy框架学习(三)Spider、Downloader Middleware、Spider Middleware、Item Pipeline的用法
Spider有以下属性: Spider属性 name 爬虫名称,定义Spider名字的字符串,必须是唯一的.常见的命名方法是以爬取网站的域名来命名,比如爬取baidu.com,那就将Spider的名字 ...
- Redux:with React(一)
作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...
- [转] 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 ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [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 ...
- redux 简介
概述 Redux 本身是个极其简单的状态管理框架, 它的简单体现在概念少, 流程明确. 但是, 正是因为简单, 使用上没有强制的约束, 所以如果用不好, 反而会让状态管理更加混乱. 我觉得, 用好 R ...
- koa/redux middleware系统解析
middleware 对于现有的一些框架比如koa,express,redux,都需要对数据流进行一些处理,比如koa,express的请求数据处理,包括json.stringify,logger,或 ...
- koa/redux middleware 深入解析
middleware 对于现有的一些框架比如koa,express,redux,都需要对数据流进行一些处理,比如koa,express的请求数据处理,包括json.stringify,logger,或 ...
- 初识Redux Middleware
前言 原先改变store是通过dispatch(action) = > reducer:那Redux的Middleware是什么呢?就是dispatch(action) = > reduc ...
随机推荐
- A + B 问题
要求: 问题:给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符. 示例: 如果 a=1 并且 b=2,返回3 代码: package main import ( "fmt&q ...
- 全卷积神经网络FCN
卷积神经网络CNN(YannLecun,1998年)通过构建多层的卷积层自动提取图像上的特征,一般来说,排在前边较浅的卷积层采用较小的感知域,可以学习到图像的一些局部的特征(如纹理特征),排在后边较深 ...
- getAttribLocation的返回值
var coord = gl.getAttribLocation(shaderProgram, "coordinates"); // 0 var coord2 = gl.ge ...
- opencv中mat类介绍
The class Mat represents an n-dimensional dense numerical single-channel or multi-channel array. It ...
- Manjaro启动项目及服务配置备忘
Manjaro启动项目及服务配置备忘 =============== 系统服务GUI管理搜索 systemdgenie 并安装,类似Windows的服务管理. ================ 系统启 ...
- Windows共享设置
Windows文件共享默认是开启的,任何用户都可以方便的设置共享目录.那么如何关闭并禁止呢. ====打开或关闭网上邻居的网络发现:1. 右键单击,网上邻居,弹出菜单选择:属性,打开网络和共享中心界面 ...
- 实验吧—隐写术——WP之 男神一般都很低调很低调的!!
首先我们打开解题连接~ 是直接给我们下载了一个压缩文件,解压后得到: 确实是很帅的小哥哥呢,呵呵...... 分析题目提示,“获取隐藏在图片中的flag”,嗯~这句很重要,他决定了我们要先用那种工具 ...
- [洛谷P1417 烹调方案]贪心+dp
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3211Dream City Time Limit: 1 Second ...
- MyBatis-Plus使用教程
单机版 安装环境 上传压缩包到/usr/local/software/下 解压安装包,进入解压目录的bin目录下,启动命令: ./solr start -force 默认端口是8983,请求虚拟机, ...
- 在使用 interface 声明一个接口时,只可以使用那个修饰符修饰该接口?
这是一个看似简单其实挺有深意的题目,答案应该大多数人都知道是什么,不过原理和原因相比很少有人仔细研究过.对于本题,我有三点说明,希望看到这个评论的人能从这三点中看到你以前没注意到的东西: ①接口的声 ...