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. CMSIS-RTOS 信号量

    信号量Semaphores 和信号类似,信号量也是一种同步多个线程的方式,简单来讲,信号量就是装有一些令牌的容器.当一个线程在执行过程中,就可能遇到一个系统调用来获取信号量令牌,如果这个信号量包含多个 ...

  2. ARM官方《CMSIS-RTOS教程》之线程Threads

    创建线程Creating Threads 一旦RTOS开始运行,就会有很多系统调用来管理和控制活跃的线程.默认情况下,main()函数自动被创建为第一个可运行的线程.在第一个例子里我们使用main() ...

  3. [Recompose] Configure Recompose to Build React Components from RxJS Streams

    Recompose provides helper functions to stream props using an Observable library of your choice into ...

  4. usb芯片调试经验

    记录一下调试usb有关的芯片的一些经验. 1.有i2c的芯片.一般有i2c的地址选择. 检查地址选择是否正确,地址是多少.SCL和SDA上面是否有上拉电阻. 芯片的地址是几位的.I2c的时钟频率也是必 ...

  5. poj 1681 Painter&#39;s Problem(高斯消元)

    id=1681">http://poj.org/problem? id=1681 求最少经过的步数使得输入的矩阵全变为y. 思路:高斯消元求出自由变元.然后枚举自由变元,求出最优值. ...

  6. CodeForces B. The least round way(dp)

    题目链接:http://codeforces.com/problemset/problem/2/B B. The least round way time limit per test 5 secon ...

  7. uestc 94(区间更新)

    题意:有一个字符串全部由'('和')'组成.然后有三种操作,query a b输出区间[a,b]字符串的括号序列是否合法.reverse a b把区间[a,b]字符串里全部'('替换成')',而且把全 ...

  8. 《机器学习系统设计》之应用scikit-learn做文本分类(上)

    前言: 本系列是在作者学习<机器学习系统设计>([美] WilliRichert)过程中的思考与实践,全书通过Python从数据处理.到特征project,再到模型选择,把机器学习解决这个 ...

  9. 项目:rbac 基于角色的权限管理系统;

    - 简单示意流程图 - RBAC分析: - 基于角色的权限管理: - 权限等于用户可以访问的URL: - 通过限制URL来限制权限: - RBAC表结构组成: from django.db impor ...

  10. Weka中数据挖掘与机器学习系列之Weka3.7和3.9不同版本共存(七)

    不多说,直接上干货! 为什么,我要写此博客,原因是(以下,我是weka3.7.8) 以下是,weka3.7.8的安装版本. Weka中数据挖掘与机器学习系列之Weka系统安装(四) 基于此,我安装最新 ...