With redux-observable, we have the power of RxJS at our disposal - this means tasks that would otherwise be complicated and imperative, become simple and declarative. In this lesson we’ll respond to an action by queuing up 2 separate Ajax requests that will execute sequentially. Then we’ll group the results from both into an array and produce a single action from our epic that will save the data into the redux store

// action

export const FETCH_STORIES = 'FETCH_STORIES';
export const FETCH_STORIES_FULFILLED = 'FETCH_STORIES_FULFILLED'; export function fetchStoriesAction(count = 5) {
return {
type: FETCH_STORIES,
payload: count
}
} export function fetchStoriesFulfilledAction(stories) {
return {
type: FETCH_STORIES_FULFILLED,
payload: stories
}
}
// epics

import {Observable} from 'rxjs';
import {combineEpics} from 'redux-observable';
import {FETCH_STORIES, fetchStoriesFulfilledAction} from "../actions/index"; const topStories = `https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty`;
const url = (id) => `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`; function fetchStoriesEpic(action$) {
return action$.ofType(FETCH_STORIES)
.switchMap(({payload}) => {
return Observable.ajax.getJSON(topStories)
// slice first 5 ids
.map(ids => ids.slice(0, 5))
// convert ids -> urls
.map(ids => ids.map(url))
// convert urls -> ajax
.map(urls => urls.map(url => Observable.ajax.getJSON(url)))
// execute 5 ajax requests
.mergeMap(reqs => Observable.forkJoin(reqs))
// results -> store
.map(stories => fetchStoriesFulfilledAction(stories))
})
} export const rootEpic = combineEpics(fetchStoriesEpic);
import {FETCH_STORIES, FETCH_STORIES_FULFILLED} from "../actions/index";

const initialState = {
stories: [],
loading: false,
}; export function storiesReducer(state = initialState, action) {
switch(action.type) {
case FETCH_STORIES:
return {
stories: [],
loading: true
};
case FETCH_STORIES_FULFILLED:
return {
stories: action.payload,
loading: false
};
default: return state;
}
} export default storiesReducer;
// component

import React from 'react';
import {connect} from "react-redux";
import {fetchStoriesAction} from "../actions/index"; export function Stories(props) {
if (props.loading) {
return (
<p>Please wait...</p>
)
}
return (
<div>
<button type="button" onClick={props.loadStories}>Load top 5 stories</button>
<StoryList stories={props.stories} />
</div>
)
} function StoryList(props) {
return (
<ul>
{props.stories.map(story =>
<li key={story.id}>
<a href={story.url}>{story.title}</a>
</li>
)}
</ul>
);
} function mapState(state) {
return state;
} function mapDispatch(dispatch) {
return {
loadStories: () => dispatch(fetchStoriesAction())
}
} export default connect(mapState, mapDispatch)(Stories);

[React] Create a queue of Ajax requests with redux-observable and group the results.的更多相关文章

  1. 转 Using $.ajaxPrefilter() To Configure AJAX Requests In jQuery 1.5

    Using $.ajaxPrefilter() To Configure AJAX Requests In jQuery 1.5 Posted February 18, 2011 at 6:29 PM ...

  2. How to create a site with AJAX enabled in MVC framework.

    How to create a site with AJAX enabled in MVC framework. The Project illustrates how to create a web ...

  3. Allow Only Ajax Requests For An Action In ASP.NET Core

    ASP.NET Core offers attributes such as [HttpGet] and [HttpPost] that allow you to restrict the HTTP ...

  4. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  5. [React] Create component variations in React with styled-components and "extend"

    In this lesson, we extend the styles of a base button component to create multiple variations of but ...

  6. [React] Create & Deploy a Universal React App using Zeit Next

    In this lesson, we'll use next to create a universal React application with no configuration. We'll ...

  7. [React] Create an Animate Content Placeholder for Loading State in React

    We will create animated Content Placeholder as React component just like Facebook has when you load ...

  8. [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

    In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the ...

  9. [React] Create an Auto Resizing Virtualized List with react-virtualized

    In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically ...

随机推荐

  1. grep常用命令讲解

    grep大家应该并不陌生,但是这个命令你确定真的会用吗?ok,接下来我通过举例子的方式,带你看清grep的本质. 首先,把/etc/password的内容复制下来命令为1.txt吧,方便操作,哈哈~ ...

  2. ubuntu -redis

    ubentu 布置redis,基本操作和CentO感觉相差不多,主要是使用命令有所差异 mark如下: ① download ② tar -zxvf xxx.tar.gz ③ cd redis-xxx ...

  3. python web开发 框架 模板 MVC

    我是跟着廖雪峰老师学习的,对于我这样的纯小白来说,跟着他的网站学习,简直是被妈妈抱在怀里一样无忧无虑,这样的学习本来没有记录下来的必要,但是由于我的粗心大意,经常会出现一些错误,所以我决定把这些错误记 ...

  4. 紫书 例题 10-27 UVa 10214(欧拉函数)

    只看一个象限简化问题,最后答案乘4+4 象限里面枚举x, 在当前这条固定的平行于y轴的直线中 分成长度为x的一段段.符合题目要求的点gcd(x,y) = 1 那么第一段1<= y <= x ...

  5. ECNUOJ 2142 放书

    放书 Time Limit:1000MS Memory Limit:65536KBTotal Submit:409 Accepted:173 Description  你要把一叠书放进一些箱子里面,为 ...

  6. gluPerspective和gluLookAt的关系

    参考文章 GL学习笔记(2) - 终于搞明白gluPerspective和gluLookAt的关系了(zz) gluPerspective的具体含义 解密--神秘的gluPerspective 函数原 ...

  7. Html+CSS基础之CSS样式

    认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...

  8. impala 概述

    impala 概述 什么是Impala? Impala是用于处理存储在Hadoop集群中的大量数据的MPP(大规模并行处理)SQL查询引擎. 它是一个用C ++和Java编写的开源软件. 与其他Had ...

  9. 洛谷P1919 【模板】A*B Problem升级版(FFT快速傅里叶)

    题目描述 给出两个n位10进制整数x和y,你需要计算x*y. 输入输出格式 输入格式: 第一行一个正整数n. 第二行描述一个位数为n的正整数x. 第三行描述一个位数为n的正整数y. 输出格式: 输出一 ...

  10. POSTGRESQL NO TABLE

    POSTGRESQL EXTENDING SQL GRIGGER PROCEDURAL