[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.

最新文章

热门文章