Skip to content

Instantly share code, notes, and snippets.

@DylanVann
Created April 10, 2017 19:58
Show Gist options
  • Select an option

  • Save DylanVann/3bedc241d258e531ee2c1e99b4d9ddf7 to your computer and use it in GitHub Desktop.

Select an option

Save DylanVann/3bedc241d258e531ee2c1e99b4d9ddf7 to your computer and use it in GitHub Desktop.

redux-saga-request

A helper for running async functions and dispatching actions in redux saga.

import { createRequest, request } from 'redux-saga-request'

// Create your request types.
const FETCH_STUFF = createRequest('FETCH_STUFF')

// Have something async to run.
const fetchStuff = fetch('https://unsplash.it/list').then(r => r.json());

// Run it with Redux Saga.
function* mySaga() {
  yield request(FETCH_STUFF, [fetchStuff]);
}

// Do stuff easily in your reducers.
const stuffReducer (state = {}, { type, payload }) => {
  switch (type) {
    case FETCH_STUFF.STARTED:
      return {
        ...state,
        // Maybe use this to show a loading spinner?
        fetching: true,
      }
    case FETCH_STUFF.SUCCEEDED:
      return {
        ...state,
        fetching: false,
        fetched: true,
        // Here's the stuff!
        stuff: payload,
      }
    case FETCH_STUFF.CANCELLED:
    case FETCH_STUFF.ERRORED:
      return {
        ...state,
        fetching: false,
        fetched: false,
        // Oh no, show an error message based on this.
        errored: true,
      }
    default:
      return state;
  }
};

Advanced Usage

  • You can pass arguments to your async function.
  • You can attach metadata to all request actions to keep them associated.
function* mySaga() {
  yield request(
    FETCH_STUFF,
    [fetchStuff, fetchStuffArg],
    { fetchStuffMeta: 'META' }
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment