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. 今日SGU 6.5

    sgu 160 题意:给你n个数字 数字范围 1 到 m 问你从中取出任意数量的数字使得这些数字的积取模m最大 收获:dp,记录dp的路径 #include<bits/stdc++.h> ...

  2. WPF获得PNG图片外观Path数据

    原文:WPF获得PNG图片外观Path数据        WPF开发界面的时候,用的最多的就是自定义控件模板,开发人员需要根据UI的设计,做出符合要求的自定义控件.但是在一些特殊情况下,UI的设计可能 ...

  3. python中的类与继承

    Class 类的定义以及实例的建立 Python中,类通过 class 关键字定义. 例如最简单的一个类定义可以为: class Person(object): pass Python 的编程习惯,类 ...

  4. 【BZOJ 1051】[HAOI2006]受欢迎的牛

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] Tarjan算法强连通缩点 . 最后出度为0的点. 如果只有一个. 那么这个"大点"所包含的点的个数就是答案了. ...

  5. iOS 卖票中多线程分析;

    注意:(主要一个加锁机制)

  6. Lesson 2 Building your first web page: Part 2

    Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...

  7. 2015北京网络赛 D-The Celebration of Rabbits 动归+FWT

    2015北京网络赛 D-The Celebration of Rabbits 题意: 给定四个正整数n, m, L, R (1≤n,m,L,R≤1000). 设a为一个长度为2n+1的序列. 设f(x ...

  8. java线程深入学习

    一.java中的线程是通过Thread类创建的, //下面是构造函数,一个共同的特点就是:都是调用init()进行创建的 public Thread() { init(null, null, &quo ...

  9. css3 scale的用法例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. pwd---以绝对路径的方式显示用户当前工作目录

    pwd命令以绝对路径的方式显示用户当前工作目录.命令将当前目录的全路径名称(从根目录)写入标准输出.全部目录使用/分隔.第一个/表示根目录,最后一个目录是当前目录.执行pwd命令可立刻得知您目前所在的 ...