redux中间件的用法

1.定义

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

2.举例日志中间件

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();const store = createStore(reducer,applyMiddleware(logger)
);

在这里，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。

3.applyMiddlewares()方法

applyMiddlewares()是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。

4.异步操作的思路

1.同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。分别是操作发起，操作成功，操作失败

以抓取数据为例，共有两种写法

// 写法一：名称相同，参数不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }// 写法二：名称不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

异步操作的思路

操作开始时，送出一个 Action，触发 State 更新为"正在操作"状态，View 重新渲染
操作结束后，再送出一个 Action，触发 State 更新为"操作结束"状态，View 再一次重新渲染

5 redux-thunk 中间件

操作结束自动发出一个action 加载成功后（componentDidMount方法），它送出了（dispatch方法）一个 Action，向服务器要求数据 fetchPosts(selectedSubreddit)。这里的fetchPosts就是 Action Creator。fetchPosts是一个Action Creator（动作生成器），返回一个函数。这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)。返回的是对象而不是函数，就要使用中间件redux-thunk

异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。

6.redux-promise中间件。

另一种异步操作的解决方案，就是让 Action Creator 返回一个 Promise 对象。这就需要使用redux-promise中间件。这个中间件使得store.dispatch方法可以接受 Promise 对象作为参数。这时，Action Creator 有两种写法。具体因为不常用不介绍。

转载于:https://www.cnblogs.com/lyxverycool/articles/6548541.html

redux中间件的用法相关推荐

redux中间件原理-讲义
1.redux中间件简介 1.1.什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reduce ...
redux中间件之redux-thunk
redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree .创建store的时 ...
Redux中间件（redux-thunk、redux-promise、redux-saga）
文章目录 1.redux中间件简介 1.1.什么是redux中间件 1.2.使用redux中间件 2.中间件的运行机制 2.1.createStore源码分析 2.2.applyMiddleware源 ...
Redux中间件——Redux-thunk
什么是thunk? Redux-thunk是作为redux的middleware存在的,thunk是函数编程界的一个专有名词,主要用于calculation delay,也就是延迟计算. functi ...
Koa2和Redux中间件源码研究
一.Koa2中间件源码分析在Koa2中,中间件被存放在一个数组中. 使用koa中,最常见的就是app.use(fn),use函数部分源码如下所示.首先中间件必须是个函数.若是generator函数, ...
Express中app.use中间件的用法-匹配所有的请求方式
场景 Node的Web应用框架Express的简介与搭建HelloWorld: Node的Web应用框架Express的简介与搭建HelloWorld_霸道流氓气质的博客-CSDN博客 Express ...
redux引用多个中间件_如何轻松创建您的第一个Redux中间件
redux引用多个中间件 by Gabriele Cimato 加布里埃莱·西马托(Gabriele Cimato) 如何轻松创建您的第一个Redux中间件 (How to create your f ...
redux中间件+react高阶组件
1.redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程.变为 action -> middlewares -> reducer.这种 ...
redux异步action_React躬行记（12）——Redux中间件
Redux的中间件(Middleware)遵循了即插即用的设计思想,出现在Action到达Reducer之前(如图10所示)的位置.中间件是一个固定模式的独立函数,当把多个中间件像管道那样串联在一起时 ...

redux中间件的用法

redux中间件的用法相关推荐

最新文章

热门文章