New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@waypointhomes/redux-thunk-actions

Package Overview
Dependencies
Maintainers
18
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@waypointhomes/redux-thunk-actions

redux-thunk-actions ===================

  • 1.1.6
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-75%
Maintainers
18
Weekly downloads
 
Created
Source

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);
    }

Keywords

FAQs

Package last updated on 16 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc