欢迎指导与讨论:)

  前言

    本文不涉及深入的知识,只是在概念层面和一个简单的例子解释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。

    

redux-observable笔记的更多相关文章

  1. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  2. 【原】redux学习笔记

    上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...

  3. redux学习笔记

    中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...

  4. React Redux学习笔记

    React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...

  5. Redux学习笔记:Redux简易开发步骤

    该文章不介绍Redux基础,也不解释各种乱乱的概念,网上一搜一大堆.只讲使用Redux开发一个功能的步骤,希望可以类我的小白们,拜托它众多概念的毒害,大牛请绕道! 本文实例源代码参考:React-Re ...

  6. Redux 学习笔记

    1:首先安装redux: npm install --save redux 2:引入redux : import { createStore } from 'redux'; //首先创建执行函数,Re ...

  7. Redux学习笔记--异步Action和Middleware

    异步Action 之前介绍的都是同步操作,Redux通过分发action处理state,所有的数据流都是同步的,如果需要一步的话怎么办? 最简单的方式就是使用同步的方式来异步,将原来同步时一个acti ...

  8. Redux学习笔记-基础知识

      Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...

  9. Redux学习笔记-----基础部分

    Redux的基本原则 唯一数据源(应用的状态数据应该只存储在唯一的一个store上): 保持状态只读(不能直接修改Store的状态,而是应该通过派发一个action对象来完成) 数据改变只能通过纯函数 ...

  10. 网页前端状态管理库Redux学习笔记(一)

    最近在博客园上看到关于redux的博文,于是去了解了一下. 这个Js库的思路还是很好的,禁止随意修改状态,只能通过触发事件来修改.中文文档在这里. 前面都很顺利,但是看到异步章节,感觉关于异步说得很乱 ...

随机推荐

  1. 数据库日常维护-CheckList_02有关数据库备份检查

    数据库备份是DB日常运维中最基本的也是最重要的工作,很多情况下都是做成作业形式实现自动化周期性的做全备.差异以及日志备份.那么,如果作业出现问题没有完成工作,我们可以设置自动报警如email被动提醒我 ...

  2. SQL连接

    SQL连接可以分为内连接.外连接.交叉连接. 数据库数据:             book表                                          stu表 1.内连接 ...

  3. Scala集合和Java集合对应转换关系

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 用Scala编码的时候,经常会遇到scala集合和Java集合互相转换的case,特意mark一 ...

  4. Elasticsearch的CRUD:REST与Java API

    CRUD(Create, Retrieve, Update, Delete)是数据库系统的四种基本操作,分别表示创建.查询.更改.删除,俗称"增删改查".Elasticsearch ...

  5. 我看不下去鸟。。。。Java和C#的socket通信真的简单吗?

    这几天在博客园上看到好几个写Java和C#的socket通信的帖子.但是都为指出其中关键点. C# socket通信组件有很多,在vs 使用nuget搜索socket组件有很多类似的.本人使用的是自己 ...

  6. Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  7. Visual Studio (VSIX,项目模板 )制作

    下载Vsiual Studio 2012 SDK 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=30668 提示:一定要注意 ...

  8. 浅谈Static关键字

    1.使用static关键字声明的属性为全局属性 未使用static关键字指定city之前,如果需要将Tom,Jack,Mary三人的城市均改成Beijing,需要再次声明三次对象的city为Beiji ...

  9. 【转】将grub2安装到u盘的方法

    将grub2安装到u盘的方法 时间:2015-03-21来源:linux网站 作者:linux人 grub2在各大linux发行版中广泛采用,它非常强大,基本上大多数操作系统都是通过它引导起来的,它的 ...

  10. MySQL存储过程(转)

    一.MySQL 创建存储过程 "pr_add" 是个简单的 MySQL 存储过程,这个存储过程有两个 int 类型的输入参数 "a"."b" ...