Redux-thunk-init NPM

redux-thunk-init

An opt-in addon for redux-thunk middleware to perform asynchronous dispatch.
You may only need this if you need to handle something before the subsequent action is dispatched. (imagine the dispatch "start" action in action creators)

Usage

Assumed you have already installed and enabled redux-thunk middleware. Then, install package:

npm i redux-thunk-init

Instead of returning thunk function directly in action creator, we wrap it with init function as first argument.
extra can be provided, by passing it as second argument which to be assigned to meta in INIT_FULFILLED action. (default: {})

import init from redux-thunk-init;

function myActionCreator() {
  const extra = {
    /* additional info you want to pass as second argument (optional) */
  };

  return init((dispatch, getState, extraArgument) => {
    // do some stuff here,
    // eg: return dispatched action or Promise-based `fetch`
  }, extra);
}

Once myActionCreator is invoked, an initial action will be dispatched:

{
  type: 'INIT_FULFILLED',
  meta: extra, // the second argument passed to `init`
  payload: {
    fulfilled: true,
    message: 'Init action dispatched!'
  }
}

You may do something in common at this initial stage in reducers, before subsequent action(s) is dispatched.
If initial action is not required, you may continue with the original redux thunk approach without using init wrapper.

Promises

init will eventually return a promise once action creator is invoked.
When a promise is returned, the original promise will remain untouched and be used (eg: the fetch's promise). Otherwise, the promise that resolved initial action will be returned.
By default, this addon is throwing back the reason when promise is rejected. However, it's possible for us to handle thrown error for all actions wrapped by init, globally:

For instance, we have one error action creator, errorActionCreator defined as follows:

// `error` received from rejected promise,
// you shape whatever error action based on needs
const errorActionCreator = error => ({
  type: "ERROR_ACTION",
  payload: error
});

and then, we pass it as one of the extra arguments via redux-thunk middleware:

const store = createStore(
  reducer,
  applyMiddleware(
    thunk.withExtraArgument({
      errorActionCreator // we register `errorActionCreator` here
    })
  )
);

When promise get rejected, errorActionCreator will be dispatched from this addon instead of throwing error back.