Skip to content

DylanVann/redux-saga-request

Repository files navigation

redux-saga-request

🏞 Redux Saga Request, request helper for Redux Saga.

npm CircleCI license

Helper for running async functions and dispatching actions in redux saga.

Usage

yarn add redux-saga-request
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' }
  )
}