[React] Create a queue of Ajax requests with redux-observable and group the results.
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.的更多相关文章
- 转 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 ...
- 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 ...
- 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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
随机推荐
- CMSIS-RTOS 信号量
信号量Semaphores 和信号类似,信号量也是一种同步多个线程的方式,简单来讲,信号量就是装有一些令牌的容器.当一个线程在执行过程中,就可能遇到一个系统调用来获取信号量令牌,如果这个信号量包含多个 ...
- ARM官方《CMSIS-RTOS教程》之线程Threads
创建线程Creating Threads 一旦RTOS开始运行,就会有很多系统调用来管理和控制活跃的线程.默认情况下,main()函数自动被创建为第一个可运行的线程.在第一个例子里我们使用main() ...
- [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 ...
- usb芯片调试经验
记录一下调试usb有关的芯片的一些经验. 1.有i2c的芯片.一般有i2c的地址选择. 检查地址选择是否正确,地址是多少.SCL和SDA上面是否有上拉电阻. 芯片的地址是几位的.I2c的时钟频率也是必 ...
- poj 1681 Painter's Problem(高斯消元)
id=1681">http://poj.org/problem? id=1681 求最少经过的步数使得输入的矩阵全变为y. 思路:高斯消元求出自由变元.然后枚举自由变元,求出最优值. ...
- 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 ...
- uestc 94(区间更新)
题意:有一个字符串全部由'('和')'组成.然后有三种操作,query a b输出区间[a,b]字符串的括号序列是否合法.reverse a b把区间[a,b]字符串里全部'('替换成')',而且把全 ...
- 《机器学习系统设计》之应用scikit-learn做文本分类(上)
前言: 本系列是在作者学习<机器学习系统设计>([美] WilliRichert)过程中的思考与实践,全书通过Python从数据处理.到特征project,再到模型选择,把机器学习解决这个 ...
- 项目:rbac 基于角色的权限管理系统;
- 简单示意流程图 - RBAC分析: - 基于角色的权限管理: - 权限等于用户可以访问的URL: - 通过限制URL来限制权限: - RBAC表结构组成: from django.db impor ...
- Weka中数据挖掘与机器学习系列之Weka3.7和3.9不同版本共存(七)
不多说,直接上干货! 为什么,我要写此博客,原因是(以下,我是weka3.7.8) 以下是,weka3.7.8的安装版本. Weka中数据挖掘与机器学习系列之Weka系统安装(四) 基于此,我安装最新 ...