一、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. mybatis的工作原理

    MyBatis的框架架构 看到Mybatis的框架图,可以清晰的看到Mybatis的整体核心对象,我更喜欢用自己的图来表达Mybatis的整个的执行流程.如下图所示: 原理详解: MyBatis应用程 ...

  2. Python网络爬虫第二弹《http和https协议》

    一.HTTP协议 1.官方概念: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文 ...

  3. C++中vector容器的常用操作方法实例总结

    C++中vector容器的常用操作方法实例总结 参考 1. C++中vector容器的常用操作方法实例总结: 完

  4. Java中的参数列表

    一. 什么是参数列表 当你在编写一个函数时,你不知道函数形参的类型或者是形参的长度时,你就可以使用参数列表来代替. 样式: public void f(Object...objects) { Syst ...

  5. python linecache模块读取文件的方法

    转自: python linecache模块读取文件 在Python中,有个好用的模块linecache,该模块允许从任何文件里得到任何的行,并且使用缓存进行优化,常见的情况是从单个文件读取多行. l ...

  6. AE旋转

    精准对位: 好几个图层上的旋转点在一个位置上: 方法1:勾选网格,定点. 方法2:按住ctrl+r  调出尺寸.拖参考线,焦点自动吸附功能. 选中四张或者选中第一张,按shift键,选中最后一张(即可 ...

  7. dp——poj1088(Description)

    dp可以按照思想大致分为两种,一种是递推的形式,一种是递归的形式(记忆化搜素). 比如求这个题因为无法知道从哪个点开始,所以只能用递归的形式,因为有一个回溯的过程. 但是很多题目既可以用递推也可以用递 ...

  8. dp——环形石子合并(区间dp)

    环形的解决很巧妙 #include <iostream> #include <cstring> #include <string> #include <map ...

  9. (18)jq事件操作

    jq的私人网站:http://jquery.cuishifeng.cn/ 具体的查看上面的网站 <!DOCTYPE html><html><head> <me ...

  10. C++学习(二十)(C语言部分)之 函数1

    函数 printf 输出的函数 scanf 输入的函数函数是什么 怎么写 是一组一起执行一个任务的语句 一个程序的基本组成单位是函数 只需要知道函数名字和括号里面要填的内容 就可以调用函数 1.如果代 ...