【凡尘】---middleware---redux-promise-middleware---【凡尘】

一、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

原文地址:https://www.cnblogs.com/nanianqiming/p/9880391.html

时间: 2024-11-10 06:11:34

【凡尘】---middleware---redux-promise-middleware---【凡尘】的相关文章

nodeclub middleware

middleware 使用 promise 的方式来处理异步,所有每个 middleware 都有三个参数 req, res, next, 对于异步的情况, 必须要调用 next() 方法.不然后续的 middleware 就无法执行. debug 的时候没调用 next() 还不会报错,一定注意 中间件复杂了,可以使用一个文件夹来管理,keystone是通过.js来写的,估计不够用 专门写篇文章,是想记录一下,那些middleware都是起什么作用,是怎么用的

Laravel 5.0 - Middleware (中间件)

图片:http://stackphp.com/ 如上图所示,中心的绿色区域是整个应用的核心区域. 所以,中间件就是一系列处理请求和响应的方式而不是你用程序逻辑的一部分. Laravel 中默认使用中间件处理请求中的加密解密,以及 Cookies 和 Sessions.你也可以自定义自己所需的中间件. 写中间件 artisan make:middleware MyMiddleware 执行上面的命令,生成中间件文件: <?php namespace App\Http\Middleware; use

Django分析之Middleware中间件

写了几周的脚本,今天终于开始接触web框架了~学习Python的web框架,那么Django就几乎是必修课了,这次的工作是先打打下手,主要的任务是在setting中添加版本号,在渲染静态css,js的路径时附带版本号,例如“example.v1124.css”,然后再在request请求中祛除掉版本号.为什么要这么做呢?因为这样做的话在前端输出静态文件的路径就会加上就会加上版本号,这样当开发出新的静态文件的时候,客户端就会强制刷新本地的缓存,为了达到这个目的就要首先要在settings文件中配置

创建自定义的Middleware中间件

创建自定义的Middleware中间件 阅读目录 何为Middleware中间件 使用Inline方式注册Middleware 使用Inline+ AppFunc方式注册Middleware 定义原生Middleware类的形式来注册Middleware 使用Katana Helper来注册Middleware Middleware的执行顺序 小结 经过前2篇文章的介绍,相信大家已经对OWIN和Katana有了基本的了解,那么这篇文章我将继续OWIN和Katana之旅——创建自定义的Middle

middleware中间件

django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在django项目的settings模块中,有一个 MIDDLEWARE_CLASSES 变量,其中每一个元素就是一个中间件,如下图. 与mange.py在同一目录下的文件夹 wupeiqi/middleware下的auth.py文件中的Authentication类 中间件中可以定义四个方法,分别是: process_r

django之中间件middleware

django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在django项目的settings模块中,有一个 MIDDLEWARE_CLASSES 变量,其中每一个元素就是一个中间件,如下图. 与mange.py在同一目录下的文件夹 wupeiqi/middleware下的auth.py文件中的Authentication类 中间件中可以定义四个方法,分别是: process_r

[转]Writing Custom Middleware in ASP.NET Core 1.0

本文转自:https://www.exceptionnotfound.net/writing-custom-middleware-in-asp-net-core-1-0/ One of the new features from ASP.NET Core 1.0 is the idea of Middleware. Middleware are components of an application that examine the requests responses coming in t

下一代Asp.net开发规范OWIN(3)—— Middleware

Middleware是OWIN管道的基本组成单元,最后拼接的OWIN管道来处理客户端请求,输出网页.这篇文章,首先看看Web Form, MVC, Web API如何结合OWIN使用. 然后将如何编写Middleware和编写一个具体的Cache Middleware. 阅读目录: 一. 原有的Web Form, MVC项目如何结合OWIN? 1.1 通过路由配置,将程序分成多个部分,一些部分由Asp.net Web Form或者MVC处理,另外一部分由OWIN管道处理.     1.2 在We

ASP.NET 5 Middleware, Or Where Has My HttpModule Gone?

31 March 2015 13:22 ASP.NET 5 has been largely rewritten from the ground up, and incorporates some radical changes when compared with previous versions of ASP.NET. One of the biggest changes is in the HTTP Pipeline. This article looks at how those ch

Connect is a middleware layer for Node.js

Connect is a middleware layer for Node.js   http://senchalabs.github.com/connect Connect Connect is an extensible HTTP server framework for node using "plugins" known as middleware. var connect = require('connect') var http = require('http') var