[RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()
So now we want to replace one user when we click the 'x' button.
To do that, we want:
1. Get the cached network data for generating the userList.
2. Then get a random user from the cached data.
3. Showing the user in the list.
We have the function to create suggestion user:
function createSuggestionStream(responseStream, closeClickStream) {
return responseStream.map(getRandomUser)
.startWith(null)
.merge(refreshClickStream.map(ev => null))
}
It contains the 'responseStream' which contains the cached data we need.
So, the code would somehow like this:
var close1Clicks = Rx.Observable.fromEvent(closeButton1, 'click');
close1Clicks.withLatestFrom(responseStream, (clickEv, cachedData) => {
return getRandomUser(cachedData);
});
When the closeClickStream happens, it will fetch the cached data and send userList to getRandomUser() function to pick user.
Now, we can merge this stream with responseStream:
function createSuggestionStream(responseStream, closeClickStream) {
return responseStream.map(getRandomUser)
.startWith(null)
.merge(refreshClickStream.map(ev => null))
.merge(
closeClickStream.withLatestFrom(responseStream,
(clickEv, cachedData) => getRandomUser(cachedData))
);
}
-----------
var refreshButton = document.querySelector('.refresh');
var closeButton1 = document.querySelector('.close1');
var closeButton2 = document.querySelector('.close2');
var closeButton3 = document.querySelector('.close3'); var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
var close1Clicks = Rx.Observable.fromEvent(closeButton1, 'click');
var close2Clicks = Rx.Observable.fromEvent(closeButton2, 'click');
var close3Clicks = Rx.Observable.fromEvent(closeButton3, 'click'); var startupRequestStream = Rx.Observable.just('https://api.github.com/users'); var requestOnRefreshStream = refreshClickStream
.map(ev => {
var randomOffset = Math.floor(Math.random()*500);
return 'https://api.github.com/users?since=' + randomOffset;
}); var requestStream = startupRequestStream.merge(requestOnRefreshStream); var responseStream = requestStream
.flatMap(requestUrl =>
Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))
)
.shareReplay(1); // refreshClickStream: -------f------------->
// requestStream: r------r------------->
// responseStream: ---R-------R--------->
// closeClickStream: ---------------x----->
// suggestion1Stream: N--u---N---u---u-----> function getRandomUser(listUsers) {
return listUsers[Math.floor(Math.random()*listUsers.length)];
} function createSuggestionStream(responseStream, closeClickStream) {
return responseStream.map(getRandomUser)
.startWith(null)
.merge(refreshClickStream.map(ev => null))
.merge(
closeClickStream.withLatestFrom(responseStream,
(clickEv, cachedData) => getRandomUser(cachedData))
);
} var suggestion1Stream = createSuggestionStream(responseStream, close1Clicks);
var suggestion2Stream = createSuggestionStream(responseStream, close2Clicks);
var suggestion3Stream = createSuggestionStream(responseStream, close3Clicks); // Rendering ---------------------------------------------------
function renderSuggestion(suggestedUser, selector) {
var suggestionEl = document.querySelector(selector);
if (suggestedUser === null) {
suggestionEl.style.visibility = 'hidden';
} else {
suggestionEl.style.visibility = 'visible';
var usernameEl = suggestionEl.querySelector('.username');
usernameEl.href = suggestedUser.html_url;
usernameEl.textContent = suggestedUser.login;
var imgEl = suggestionEl.querySelector('img');
imgEl.src = "";
imgEl.src = suggestedUser.avatar_url;
}
} suggestion1Stream.subscribe(user => {
renderSuggestion(user, '.suggestion1');
}); suggestion2Stream.subscribe(user => {
renderSuggestion(user, '.suggestion2');
}); suggestion3Stream.subscribe(user => {
renderSuggestion(user, '.suggestion3');
});
[RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()的更多相关文章
- [RxJS] Reactive Programming - Rendering on the DOM with RxJS
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...
- [RxJS] Reactive Programming - What is RxJS?
First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...
- [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()
In currently implemention, there is one problem, when the page load and click refresh button, the us ...
- [RxJS] Reactive Programming - Sharing network requests with shareReplay()
Currently we show three users in the list, it actually do three time network request, we can verfiy ...
- [Reactive Programming] Async requests and responses in RxJS
We will learn how to perform network requests to a backend using RxJS Observables. A example of basi ...
- [RxJS] Reactive Programming - New requests from refresh clicks -- merge()
Now we want each time we click refresh button, we will get new group of users. So we need to get the ...
- [RxJS] Reactive Programming - Why choose RxJS?
RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a ...
- [Reactive Programming] RxJS dynamic behavior
This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm fo ...
- .Net中的反应式编程(Reactive Programming)
系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...
随机推荐
- 如何让asp.net mvc 直接运行mobile页面
在controller里面加上下面一句 HttpContext.SetOverriddenBrowser(BrowserOverride.Mobile);
- springmvc 基础
在最简单的springmvc应用程序中,控制器是唯一需要在java web部署描述文件(web.xml)中配置的servlete(springmvc的控制器是Dispatcher Servlet).每 ...
- Java基础知识强化44:StringBuffer类之把数组拼接成指定格式的字符串的案例
1. 先看案例代码如下: package cn.itcast_07; /* * 把数组拼接成一个字符串 */ public class StringBufferTest2 { public stati ...
- access 2007 vba 开发中学到的知识(一)
使用ado连接本身的数据库,需要先创建一个 adodb.connection的连接对象 Set cn = CreateObject("ADODB.Connection") 数据库的 ...
- Spring4分别整合mongo2.X和3.0
1.pom文件添加: <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-jav ...
- Ajax实现三级联动(0520)
查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...
- php DOMDocument 递归 格式化缩进HTML文档
function format(\DOMNode $node, $treeIndex = 0) { //不格式化的标签 if (in_array($node->nodeName, array(& ...
- Android再学习-便签开发小结-20141119
这几天的便签开发,首先遇到的问题就是数据库操作问题.现在已经可以读写数据库了,并能将数据放在正确的位置显示. 专门建立了一个数据库操作的包,命名为"...database".新建一 ...
- A*八数码
帮同学写的八数码,启发式搜索 创建两个表open,close,分别用的stl中的优先队列priority_queue和map,好久没写过代码了,bug调了半天 #include <iostrea ...
- dos下修复硬盘损坏的文件
点击开始-->运行-->输入cmd,出现DOS状态对话框.在光标处输入有损坏文件的磁盘盘符后回车(如文件夹在D盘就输入D:然后回车),再输入“CHKDSK”,回车即可看到相关检测信息.“C ...