【巷子】---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 ...
随机推荐
- SQL注入之Sqli-labs系列第二关
废话不在多说 let's go! 继续挑战第二关(Error Based- Intiger) 同样的前奏,就不截图了 ,and 1=1和and 1=2进行测试,出现报错 还原sql语句 查看源代 ...
- easyUI 下拉组件转义
<labelclass="label"for="belongWidget">归属组件:</label> <inputid=&quo ...
- Ubuntu add sudo
为了安全起见,ubuntu中的普通用户一般没有root权限,因此即使知道管理员密码也无法使用sudo,但这个情况可以通过加入sudoer列表或者加入sudo组来改变. 拓展: 不管使用哪种方式,使得一 ...
- 【leetcode】58-LengthofLastWord
problem Length of Last Word 只有一个字符的情况: 最后一个word至字符串末尾之间有多个空格的情况: code1 class Solution { public: int ...
- kali的安装
https://www.youtube.com/watch?v=sB3bchzlwio 注意视频中选择的是kali 2016.2版本, 在VMware中选择了Linux-Debian 8.*64(好像 ...
- CFG文件格式
大多数情况下,很多程序都要保存用户的设置,办法有很多:注册表,日志文件·..... 而很多程序都使用了一个专用的文件.为了方便起见,常常命名为*.cfg,有时甚至直接命名为Config.cfg. 这只 ...
- 在django中进行MySQL入库
在django中进行mysql 入库 需要导入 : from django.db import models 在添加主键时,需要使用: primary_key=True id = models. ...
- Codeforces Round #516(Div 2)
比赛链接:传送门 A. Make a triangle!(简单思维) 题目大意: 给你三条边,问你最多加多少长度能使这三条边能构成三角形. 思路: 最大边小于答案加另外两条边的和. #include ...
- lesson7-图像描述 -小象cv
2018-04-25朴素rcnn - 梯度消失严重LSTM长短时记忆模型,有效捕捉长时记忆包含四个神经元组:一个记忆神经元三个控制门神经元:输入.忘记.输出 注意:输入调制门.输出调制门 3个输入:前 ...
- LeetCode - Find K Closest Elements
Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...