redux-observable笔记

欢迎指导与讨论：)

　　前言

　　　　本文不涉及深入的知识，只是在概念层面和一个简单的例子解释redux-observable的工作原理。

　　　　redux-observable，是redux的一个中间件库。它能够自动响应我们所dispatch的actions并执行对应的函数，让我们把复杂的异步函数分离到一些Epic的函数里面。因此不再需要react-thunk来让redux支持所谓的异步action了，同时让代码耦合度降得更低。redux-observable让redux的action更加纯净，都是干净的对象字面量 —— redux-observable适合大型复杂的状态管理，而且让代码分离度和可维护度更高。但可能需要先掌握RxJS的基本概念和api用法。

　　几个概念

　　　　可观察流与自动响应、redux的dispatch、Epics函数、redux-observable的内部原理。

　　　　可观察流与自动响应

　　　　　　可观察流相当于一个发射器，它能够随时间地流逝不断 发送/产生 各种各样的值，当我们监听这个发射器时，就会收到发射过来的值并可以执行我们想要的操作。而启动这个监听，需要触发 .subscribe( ) 。每当有一个新值发送时，subscribe里的代码就会自动执行 —— 自动响应。

// 一个简单的例子

发射器.subscribe( function( 收到的值 ){// 根据值可以进行一些函数操作
})

　　　　redux的dispatch( action )

　　　　　　redux的dispatch（action）函数能够根据action类型的不同，让应用的状态store响应它的变化。每当dispatch一个action时，应用状态可能就会更变。

// 下面代码触发时，应用状态会被刷新

dispatch({ type: 'man' })

　　　　Epics函数

　　　　　　redux-observable里的Epics函数主要作用是：1. 传进一个action，然后return一个新的、不一样的action。2. 这个Epics函数是一个发射器，因此我们能够subscribe它，从而可以监听并收到新的action。3. 每当我们调用redux的dispatch的时候，所有的Epics函数都会执行。

function (action$: Observable<Action>, store: Store): Observable<Action>;

　　　　redux-observable的内部原理

　　　　　　 ( 1 ) 每当我们使用redux的dispatch的时候，每个Epics函数都会收到我们所dispatch的action，然后Epics函数返回一个新的action。

　　　　　　（2）监听Epics函数，将它返回的新的action，用来dispatch，从而更新应用状态

// 用代码表示就是

epic(actions$).subscribe( function( ){dispatch( newAction ) // dispatch新的action
})

　　一个简单的例子

// 定义两个action creator// 1. 拉取某用户数据
const fetchUser = username => ({ type: '拉取某用户数据', target: username });
// 2. 拉取完成
const fetchUserDone = data => ({ type: '拉取完成', data});// 定义一个Epics函数
const fetchEpics = action$ => action$.ofType('拉取某用户数据') // 如果true则进行下一步否则退出.mergeMap( action => // 提取action.target并进行ajax请求ajax.getJson(`/api/users/${action.target}`).map(function( data ){fetchUserDone ( data )// 调用拉取完成函数，返回{ type: '拉取完成', data }
                 }));

　　　　从上面的这个例子我们看到：

　　　　（1）不再有异步action，即类型为函数的这种action，redux的action都是纯净的对象字面量了。

　　　　（2）拉取数据的函数写到了Epics函数里面

　　　　（3）Epics函数会对action的类型进行判断，满足不了不会继续执行

　　　　（4）注：上面的mergeMap、ajax、map这几个都是RxJS的api。

　　总结

　　　　redux-observable的优点大概有这几个，欢迎补充。（1）会自动响应redux的dispatch，每当触发时都会执行我们定义的Epics函数。（2）把拉取数据等等的业务逻辑代码可以分离到Epics函数里面，降低代码耦合度，提升维护度（3）action都是纯净的对象字面量，不再需要引入redux-thunk。

转载于:https://www.cnblogs.com/BestMePeng/p/redux_observable.html

redux-observable笔记相关推荐

Redux 学习笔记
1:首先安装redux: npm install --save redux 2:引入redux : import { createStore } from 'redux'; //首先创建执行函数,Re ...
redux学习笔记归纳
设计思想: (1)Web 应用是一个状态机,视图与状态是一一对应的. (2)所有的状态,保存在一个对象里面. 核心源码: 基本概念: 1.Store:就是保存数据的地方,你可以把它看成一个容器.整个 ...
redux rxjs_可观察的RxJS和Redux入门指南
redux rxjs Redux-Observable is an RxJS-based middleware for Redux that allows developers to work wit ...
redux 局部刷新_如何使用Redux Observables和刷新令牌API获取新的访问令牌
redux 局部刷新 by Sachin Kumar 由Sachin Kumar 如何使用Redux Observables和刷新令牌API获取新的访问令牌 (How to get a new acc ...
React+Redux技术栈核心要点解析（中篇）
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
2019 年 React 学习路线图
作者 | javinpaul 译者 | 无明之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发 ...
初学redux笔记，及一个最简单的redux实例
categories: 笔记 tags: react redux 前端框架把初学redux的一些笔记写了下来分享一个入学redux很合适的demo, 用redux实现计数器这是从阮一峰老师git ...
Redux 进阶 - react 全家桶学习笔记（二）
注:这篇是17年1月的文章,搬运自本人 blog... https://github.com/BuptStEve/... 零.前言在上一篇中介绍了 Redux 的各项基础 api.接着一步一步地介绍 ...
React学习笔记——redux里中间件Middleware的运行机理
1.前言上篇文章中,我们详细介绍了redux的相关知识和如何使用,最后使用中间件Middleware来帮助我们完成异步操作,如下图上面是很典型的一次 redux 的数据流的过程,在增加了 midd ...

redux-observable笔记

redux-observable笔记相关推荐

最新文章

热门文章