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-promise-procedures with all npm packages installed. Try it out:

var reduxPromiseProcedures = require("redux-promise-procedures")

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

redux-promise-procedures v1.0.3

Redux procedures simplify boilerplate for side-effect routines while maintaining the flexibility of redux-sagas or redux-observables (both fully compartible)

redux-procedures

Redux procedures simplify boilerplate for side-effect routines while maintaining the flexibility of redux-sagas or redux-observables (both fully compartible)

why another lib?

I have been successfully using redux-observables and redux-sagas, but mostly the boilerplate required for them is too large for a simple side-effect. Another brick of the inspiration was the redux-saga-routines library, which made it really easy to work with So the fruit of the idea of combining Promise and routines model is this library.

usage

Create a auth.dux.js - is a login reducer file following Ducks convention:

const loginRequest = (payload, meta, storeInstance) => axios.post('/login', payload);
const LoginProcedure = createProcedure('LOGIN', loginRequest);
export default (state = {
  isAuthenticated: false,
  authenticating: false,
  user: false
}, action) => {
    switch (action.type) {
      case LoginProcedure.TRIGGER:
        return ({
          ...state,
          authenticating: true,
        });
      case LoginProcedure.SUCCESS:
        return ({
          ...state,
          isAuthenticated: true,
          user: action.payload.user
        });
      case LoginProcedure.FAILURE:
          return ({
            ...state,
            isAuthenticated: false,
            error: action.payload
          });
      case LoginProcedure.FULFILL:
        return ({
          ...state,
          authenticating: false,
        });
      default:
        return state;
    }
  }

Add initialization to your store:

import { procedureMiddleware } from 'redux-procedures';

const middlewares = [
  /* epicMiddleware,
  sagaMiddleware, 
  yourOtherMiddlewares, */ 
  procedureMiddleware
];

const store_enhancers = [
  applyMiddleware(...middlewares)
];

const store = createStore(
  baseReducer,
  initial_state,
  composeEnhancers(...store_enhancers)
);

Use your routine:

const payload = { username, password };
const meta = { metaValue: 'value' };
LoginProcedure(payload, meta)
  .then(result => { console.log(result) })
  .catch(error => { console.error(error); })

How to pause promise execution until an action arrives:

import { ActionPromise } from 'redux-procedures';

ActionPromise('ACTION_TYPE')
  .then(action => {
    console.log('action has been dispatched', action);
  });
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