redux-async-transitions

This module is a combination of following two modules along with features included redux-async and redux-history-transition

thanks to the author

NOTE: All the code blocks are written with ES6

Installation

npm install --save redux-async-transitions

How to Use

import { createStore, compose } from 'redux';
import asyncMiddleware from 'redux-async-transitions';
const store = compose(asyncMiddleware(history))(createStore);

Features

Function calls

Apart from path transition like this

  return {
    type: types.SOMEFUNCTION,
    payload: {
      data: somedata
    },
    meta: {
      transition: () => ({
        path : '/somePath',
        query: {
          someKey: 'someQuery'
        },
        state: {
          stateObject: stateData
        }
      })
    }
  };

we can have another function to be called while executing a function, were the page transition happens only after executing the function (someOtherfunction)

  return {
    type: types.SOMEFUNCTION,
    payload: {
      data: somedata
    },
    meta: {
      transition: () => ({
        func: () => {
          return someOtherfunction();
        },
        path : '/somePath',
        query: {
          someKey: 'someQuery'
        },
        state: {
          stateObject: stateData
        }
      })
    }
  };

async function calls

  return {
    types: [types.PENDINGFUNCTION, types.SUCCESSFUNCTION, types.FAILUREFUNCTION],
    payload: {
      response: someapi.asyncall() // only return promise
    }
    meta: {
      transition: (state, action) => ({
        onPending: () => {
        },
        onSuccess: (successdata) => {
        },
        onFail: (promiseError) => {
        }
      })
    }
  };

for each async functions we can have path and also a function like below

  onSuccess: (successdata) => {
    return {
      func: () => {
        return someOtherfunction();
      },
      path : '/somePath',
      query: {
        someKey: 'someQuery'
      },
      state: {
        stateObject: stateData
      }
    }
  }