Package Exports

redux-sync-promise

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-sync-promise) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

redux-sync-promise

Middleware for writing asynchronous actions in synchronous style

Installation

$ npm install --save redux-sync-promise

Usage

Add middleware

import { APISync } from 'redux-sync-promise';

const api = APISync({/* options */});
const createMiddleware = applyMiddleware(thunk, api);
const store = createMiddleware(createStore)(reducer);

Action Examples

Every action will dispatch type name from types plus postfix.

// This example will dispatch PEOPLE_PENDING, PEOPLE_SUCCESS or PEOPLE_FAILURE
/*
 * Full example
 * */
export function getPeopleList(country, age) {
  return {
    types: 'PEOPLE',
    // this data will add in all functions like arguments
    data: {country, age},
    // disable dispatch PENDING event in this action
    off: {
      pending: true
    },
    name: getPeopleName,
    work: getPeopleWork
    food: getPeopleFood
  }
}

/*
 * Get people info
 * @param {object} state - store state
 * @param {function} dispatch - action dispatch function
 * @param {array} props - props in the data key in the action
 * */
async function getPeopleName(state, dispatch, props) {
  let {people: {entriesOnPage}} = state;
  let requestString = `people/?rows=${entriesOnPage}`;

  const {data: {people, total}} = await fetch(requestString);
  return {people, total};
}
// and so on ...

/*
 * Simple examples
 * */
 export function getUnicornList(data) {
   return {
     types: 'UNICORN',
     list: request.post('food/', data)
   }
 }

 export function getUnicornList(data) {
   return {
     types: 'UNICORN',
     list: request.post('list/', data),
     food: request.post('food/', data),
   }
 }

 export function getUnicornList() {
   return {
     types: 'UNICORN',
     list: async (state, dispatch, props) => {
       let rainbow = await getRainbow();
       return rainbow.data.colors
     }
   }
 }

 export function getUnicornList(data) {
   return {
     types: 'UNICORN',
     data: {...data},
     list: async (state, dispatch, props) => {
       let rainbow = await getRainbow();
       return rainbow.data.colors
     },
     food: async (state, dispatch, props) => {
       let rainbow = await getFood();
       return rainbow.data.colors
     }
   }
 }

 export function getUnicornList(data1, data2) {
   return {
     types: 'UNICORN',
     list: Promise.all([
      request.post('food/', data1),
      request.post('rainbow/',data2)
    ])
   }
 }

API

APISync exposes single constructor function for creating middleware.

APISync( options: Object )

// Full example
APISync({
    postfix: {
        pending: 'IS_PENDING',
        success: 'IS_SUCCESS'
        failure: 'IS_FAILURE'
    },
  // global enable/disable dispatching event
  off: {
    pending: false,
    success: false,
    failure: false,
  }
    onPending: (dispatch, data) => {
        console.log('some action api pending');
    },
    onSuccess: (dispatch, result, data) => {
        console.log('some action api success');
    },
    onError: (dispatch, error, data) => {
        // example use on errors
        if(err.status === 401)
            dispatch({type: 'LOGOUT_SUCCESS'});

        console.log('some action api error');
    }
})

postfix

Add your custom action type postfix for API call.

Default: PENDING, SUCCESS, FAILURE

onPending

Callback when actions in progress

/*
 * @param {function} dispatch - action dispatch function
 * @param {object} data -  an array of props in the data key in the action
 */
onPending = (dispatch, data) => {}

onSuccess

Callback on success

/*
 * @param {function} dispatch - action dispatch function
 * @param {object} result - total result object
 * @param {object} data -  an array of props in the data key in the action
 */
onSuccess = (dispatch, result, data) => {}

onError

Callback on error

/*
 * @param {function} dispatch - action dispatch function
 * @param {object|string} error - total error
 * @param {object} data -  an array of props in the data key in the action
 */
onError = (dispatch, error, data) => {}

off

Global disable dispatching SUCCESS, PENDING or FAULURE event

off: {
  pending: false,
  success: false,
  failure: false,
}

Reducer create helper

Standart wrapper for create reducers. I use it on some projects , for this reason, he added to the package

import { createReducer } from 'redux-sync-promise';

export default createReducer(initialState, {
  [PEOPLE_SUCCESS](state, action) {
     return {...state}
  }
})

License

Released under the MIT license. See license for details.