@waypointhomes/redux-thunk-actions

1.1.6 • Public • Published

redux-thunk-actions

Easily create action creators for redux with redux-thunk.

Rationale

With redux-actions you can do:

let increment = createAction('INCREMENT');
expect(increment(42)).to.deep.equal({
  type: 'INCREMENT',
  payload: 42
});

With redux-thunk you can do:

function myFetch() {
  // instead of an object, you can return a function
  return (dispatch) => {
    dispatch({type: 'MY_FETCH_START'});
    try {
      //we can do async and then dispatch more stuff
      await api.fetch();
    }
    catch(e) {
      return dispatch({type: 'MY_FETCH_FAIL', error: e});
    }
    dispatch({type: 'MY_FETCH_END'});
  }
}
dispatch(myFetch());

With redux-thunk-actions, you can do:

let myFetch = createActionThunk('MY_FETCH', () => api.fetch());

This will generate two of three possible actions:

  • MY_FETCH_STARTED
  • MY_FETCH_SUCCEEDED
  • MY_FETCH_FAILED
  • MY_FETCH_ENDED

You can pass both sync and async functions and the actions will be dispatched accordingly.

Installation

npm install --save redux-thunk-actions

Usage

import { createActionThunk } from 'redux-thunk-actions';

non-async

With non async functions, it will dispatch start/fail/end actions anyway.

reducer.js

case 'FETCH_SUCCEEDED':
  return Object.assign({}, state, {
    data: action.payload
  });

You can dispatch as usual:

let fetch = createActionThunk('FETCH', () => 3);
dispatch(fetch());
assert.equal(store.getState().data, 3);

async

let fetch = createActionThunk('FETCH', myAsyncFunc);
// you can try/catch dispatch.
let data = await dispatch(fetch());

With promises:

let fetch = createActionThunk('FETCH', myAsyncFunc);
dispatch(fetch()).then(
  data => {
    console.log(data)
    //state is already updated!
    assert.equal(store.getState().data, data);
  },
  error => console.log(error)
);

Errors

reducer.js

//...
    case 'FETCH_FAILED':
      return Object.assign({}, state, {
        started: false,
        error: action.error
      });

then if the action throws it fails:

    let fetch = createActionThunk('FETCH', () => {
      throw new Error('boom!');
    });
    try {
      //if action is async, you can use await here!
      dispatch(fetch());
    }
    catch(e) {
      assert.equal(e.message, 'boom!');
      assert.equal(getState().error, true);
    }

Package Sidebar

Install

npm i @waypointhomes/redux-thunk-actions

Weekly Downloads

0

Version

1.1.6

License

MIT

Unpacked Size

9.55 kB

Total Files

5

Last publish

Collaborators

  • carlossarinana
  • maykgoncalvesih
  • mathhbs
  • anoemiventura
  • sparishih
  • fabricioanciaes
  • scottpopplewellih
  • felipe.delima
  • antonio-alanya
  • parthpatelivh
  • invh-luislora
  • joshua.barton
  • abhinavsharmacorpit
  • nikhil.sodemba
  • ravi116
  • praveen-gangasani
  • jamiemott
  • jbailey01
  • danieloglesby00
  • juanplasenciaih
  • robbieyng-ih
  • svc-npm-github
  • psapocalypse
  • edwagner
  • jralmontec
  • barreira_invitation_homes
  • shawn.roller
  • diegosiena
  • jenchartier
  • thespyguy
  • emiliorojasih
  • andyasberry
  • romack-ih
  • qbert1485
  • rpack78
  • webmaster-csh
  • davidaayers
  • amednin
  • adcallaghan
  • alex.telford
  • ryan.breidenbach
  • wasimarif
  • arielbarcellos