Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including redux-saga-compose with all npm packages installed. Try it out:

var reduxSagaCompose = require("redux-saga-compose")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redux-saga-compose v1.1.2

Middleware composer for redux-saga sagas, in the style of koa / koa-compose

redux-saga-compose

Build Status

Small utility for redux-saga to allow composing of middleware sagas, in the style of koa-compose

Rationale

For 95% of sagas, you won't need this. This module is intended for use when redux-saga is used in order to orchestrate a very complex data pipeline.

For example, you need to:

  • take an action,
  • build a complex request object by merging and transforming different bits of the action and state,
  • putting actions pre- and post- request to trigger UI changes,
  • transforming the response from the server (based on more things that you might need from state / originating action),
  • and finally put an action containing the response,
  • wrapping the whole lot to catch errors.

This module allows you to compose sagas that conform to a specific middleware signature (similar to that used by koa's middleware) into a single saga (that is itself composible, should you need to go all inception-style deep).

Middleware

// the simplest, do nothing, pass-through middleware
function * (request, next) {
    return (yield call(next, request));
}
function * (request, next) {

   // do something to enrich the request on the way down the middleware stack:
   const updatedRequest = {
       ...request,
       stuff: "now with added stuff"
   };
   
   // pass the request down the stack:
   const response = yield call(next, updatedRequest);
   
   // do something to the response on the way back up:
   return {
       ...response,
       thing: "new improved response with extra thinginess!"
   };
}

Usage

We will build a saga that listens for REQUEST_DATA actions and inject them into our middleware pipeline.


import { takeLatest } from 'redux-saga';
import reduxSagaCompose from 'redux-saga-compose';

const requestPipeline = reduxSagaCompose([
  
  // these do things pre-request and post-response, wrapping the whole stack.
  handleLoadingUI,
  errorHandlerWrapper,
  
  // transforms the request on the way down
  transformRequest,
  
  // transform the response on the way back up (so dispatch happens AFTER transform)
  dispatchResponseAction,
  transformResponse,
  
  // the u-bend at the bottom of the stack
  makeRequest
]);

export default function * () {
    yield* takeLatest(REQUEST_DATA, requestPipeline);
}

More Examples

For now, check out the tests for implementation. Adding a good example to this Readme is on my todo list :-)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free