JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 115
  • Score
    100M100P100Q76383F
  • License Apache-2.0

Reducing the boilerplate of redux asynchronous applications

Package Exports

  • redux-act-async

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-act-async) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

redux-act-async

Create async actions based on redux-act

Install

npm install redux-act-async --save

Badges

Build Status

Usage

import thunk from 'redux-thunk'
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createReducer} from 'redux-act';
import {createActionAsync} from 'redux-act-async';

// The async api to call, must be a function that return a promise
let user = {id: 8};
function apiOk(){
  return Promise.resolve(user);
}

// createActionAsync will create 3 synchronous action creators: login.request, login.ok and login.error
const login = createActionAsync('LOGIN', apiOk);

const initialState = {
  authenticated: false,
};

let reducer = createReducer({
    [login.request]: (state, payload) => ({
        ...state,
        request: payload,
        loading: true,
        error: null
    }),
    [login.ok]: (state, payload) => ({
        ...state,
        loading: false,
        data: payload.response
    }),
    [login.error]: (state, payload) => ({
        ...state,
        loading: false,
        error: payload.error
    }),
}, initialState);

const store = createStore(reducer, applyMiddleware(thunk));

let run = login({username:'lolo', password: 'password'});

await store.dispatch(run);

Legacy redux

In a nutshell, the following code:

const options = {rethrow: true};
const login = createActionAsync('LOGIN', api, options);

is equivalent to:

const LOGIN_REQUEST = 'LOGIN_REQUEST'
const LOGIN_OK = 'LOGIN_OK'
const LOGIN_ERROR = 'LOGIN_ERROR'

const loginRequest = (value) => ({
  type: LOGIN_REQUEST,
  payload: value
})

const loginOk = (value) => ({
  type: LOGIN_OK,
  payload: value
})

const loginError = (value) => ({
  type: LOGIN_ERROR,
  payload: value
})

const options = {noRethrow: true};

export const login = (...args) => {
  return (dispatch, getState) => {
    dispatch(loginRequest(...args));
    return api(...args, dispatch, getState)
    .then(response => {
      const out = {
          request: args,
          response: response
      }

      dispatch(loginError(out))
      return out;
    })
    .catch(error => {
      const errorOut = {
          actionAsync,
          request: args,
          error: error
      }
      dispatch(loginError(errorOut))
      if(!options.noRethrow) throw errorOut;
    })
  }
}

Who is using this library ?

This library has been extracted originally from starhack.it, a React/Node Full Stack Starter Kit.