Fixes

• #290: promiseTypeDelimiter: "" is ignored and instead uses default delimiter

Fixes

• #256: Removes the version 6.0.0 warning from production builds

Fixes

• #251: URL to documentation incorrectly linked in the source code.

Fixes

• #241: ActionType enum was declared as an interface and incorrectly named ActionTypes, not ActionType.

Fixes

• #237: TypeScript definitions not published to npm

Breaking Changes

Previously, the middleware need to be instantiated with an optional configuration.

import promiseMiddleware from 'redux-promise-middleware'

applyMiddleware(
  promiseMiddleware({
    // Optional configuration
  }),
)(createStore)
This implementation enabled custom configuration, but, for most implementations, it is uncessary overhead.

Now, the default export is preconfigured and ready to go.

import promise from 'redux-promise-middleware'

applyMiddleware(
  promise,
)(createStore)

We still support custom configuration. Check the upgrading guide for more help.

Thanks to @rahulbdominic and @zhanyuzhang for assisting on this release.

New

• Updated TypeScript definitions with more robust types to use for async action creators (#234)

This release adds Typescript bindings, thanks to @franklixuefei!

This release adds peer dependency support for Redux 4. This is backwards compatible release, meaning there are no API changes. Should you experience any bugs, please file an issue and we'll get to it!

Breaking Changes 🔥 🚒

The promiseTypeSeparator config property is now promiseTypeDelimiter.

Why? Because delimiters are one or more characters used to specify the boundaries in strings. It’s a delimiter, not a separator!

applyMiddleware(
  promiseMiddleware({
    promiseTypeDelimiter: '/'
  })
)

With the above configuration, given FOO async action, the type will be appended with a forward slash / delimiter.

{
  type: 'FOO/PENDING'
}

New ✨

• Async functions—using async/wait—are supported. Thanks to @mikew for the PR!
• Development dependencies and example project dependencies are upgraded.
• The middleware code comments were extended to provide a clearer picture of how it works.

Here’s an async/await example:

{
  type: 'TYPE',
  async payload () {
    const fooData = await getFooData();
    const barData = await getBarData(fooData);

    return barData;
  }
}

See the Async/Await guide for more.

This is a big release that adds new functionality and resolves #159, an outstanding issue from this summer.

Here’s the complete list:

• Reverts the changes from #126, subsequently released in version 4.3.0.
• Resolves #159.
• Adds support for ES6 Modules, thanks to @anajavi. This enables scope hosting on WebPack 3, saving a space and increasing performance.
• Adds support for custom separators on action types, thanks to @roboslone. Now your actions can be customized to, for example, FOO/FULFILLED or FOO-FULLFILLED instead of FOO_FULFILLED.
• Updates to WebPack 2, thanks to @GeKorm.
• Changes UMD paths to dist/umd/redux-promise-middleware.js and dist/umd/redux-promise-middleware.min.js.

This release has been deprecated due to breaking changes in error handling.

~~This release fixes a bug when a dispatch call throws an error in handleFulfill, changing the promise state to rejected. This can happen when a reducer throws an error or a component's render throws as a result of a Redux store update.~~

~~Thanks to @danwang for the PR!~~

This release adds the default suffix types as module exports, as documented in the Introduction. This is useful for reducers.

import { PENDING, FULFILLED, REJECTED } from 'redux-promise-middleware';

export default function fooReducer(state = {}, action) {
  switch (action.type) {
    case `FOO_${FULFILLED}`:
      return ...
  }
}

Thanks to @piu130 for the PR!

Falsy values of the data and meta properties are now preserved by the middleware.

When a Promise is resolved with a value of 0 or false, it will be included as the value of the fulfilled action payload property.

This release introduces changes to error handling.

Previously, the parameter of the rejected promise callback was both the dispatched action and an Error object. The middleware also always constructed a new Error object, which caused unexpected mutation and circular references.

Now, the parameter of the rejected promise callback is the value of reject. The middleware does not construct a new error; it is your responsibility to make sure the promise is rejected with an Error object.

// before
const bar = () => ({
  type: 'FOO',
  payload: new Promise(() => {
    reject('foo');
  })
});.then(() => null, ({ reason, action }) => {
  console.log(action.type): // => 'FOO'
  console.log(reason.message); // => 'foo'
});

// after
const bar = () => ({
  type: 'FOO',
  payload: new Promise(() => {

    /**
     * Make sure the promise is rejected with an error. You
     * can also use `reject(new Error('foo'));`. It's a best
     * practice to reject a promise with an Error object.
     */
    throw new Error('foo');
  })
});.then(() => null, error => {
  console.log(error instanceof Error); // => true
  console.log(error.message); // => 'foo'
});

This release adds UMD (Universal Module Definition) build tasks. A UMD module is a "universal" module compatible either the AMD or CommonJS loaders, or no module loader at all. This blog post offers a comparison between the module types.

The implementation is adapted from reactjs/react-router-redux@ad0d41d and uses a modified module definition to work around webpack/webpack#706. Specifically, this release uses the umd libraryTarget webpack option to "export to AMD, CommonJS2 or as property in root".

This release extends the functionality introduced in version 3.2.0 to preserve the original error. When the rejection reason instance of Error, the original error object will be used instead of constructing a new error.

🔥🚒 The version 3.2.0 release broke catch() on promises.

// expected functionality
doSomethingAsyncAndReject().catch(() => { 
  // called once 🙂
});

// version 3.2.0
doSomethingAsyncAndReject().catch(() => { 
  // never called ☹️
});

This release fixes the functionality of catch and updates tests. Previously, an error in how async...await was used caused tests to pass even if the assertion failed. Tests now use done to ensure async tests complete with full confidence.

Instead of constructing a new promise and returning the new promise, the middleware returns the original promise. This change was made to avoid an anti-pattern and to ensure the original promise object methods are preserved, such as in the case where a library like Bluebird is used.

The rejected parameter for a promise is now an error object. This change is not breaking.

// before
Promise.reject('foo').catch(error => {
  console.log(error instanceof Error); // => false
});

// after
Promise.reject('foo').catch(error => {
  console.log(error instanceof Error); // => true
});

// error object keys remain the same as 3.0.x
Promise.reject('foo').catch(({ reason, action }) => {
  console.log(reason); // => 'foo'
});

Removes

• node_modules from npm

Removes:

• docs/ folder from npm
• examples/ folder from npm

This is the first release under the @prev dist tag on npm

breaking

• removes the feature of resolving custom actions in favour of resolving thunks for providing the same functionality.
• returns original promise from dispatch instead of a custom action

notes if your original promise rejects, you can optionally catch it yourself from the caller of the action creator -- also if your promises have extra functionality (such as try or finally), this will be available from the caller.

This release introduces some major changes to the functionality of the middleware:

First, the middleware returns a promise instead of the action.

// before
const foo = () => ({
  type: 'FOO',
  payload: {
    promise: Promise.resolve('foo')
  }
});

foo().action.promise.then(value => {
  console.log(value); // => 'foo'
});

// after
const bar = () => ({
  type: 'BAR',
  payload: Promise.resolve('bar')
});

bar().then(({ value }) => {
  console.log(value); // => 'bar'
});

Second, a new promise is created so .then() and .catch() work as expected.

// before
const foo = () => ({
  type: 'FOO',
  payload: {
    promise: Promise.reject('foo')
  }
});

foo().action.promise.then(
  value => {
    console.log(value); // => 'foo'
  },
  reason => {
    // nothing happens
  }
);

// after
const bar = () => ({
  type: 'BAR',
  payload: Promise.reject('bar')
});

bar().then(
  ({ value }) => {
    // ...
  },
  ({ reason }) => {
    console.log(reason); // => 'bar'
  }
);

const baz = () => ({
  type: 'BAZ',
  payload: new Promise((resolve, reject) => {
    throw 'baz'
  })
});

bar().catch(({ reason }) => {
  console.log(reason) // => 'baz'
});

Third, promises can be explicitly or implicitly in the action object.

// before
const foo = () => ({
  type: 'FOO',
  payload: {
    promise: Promise.resolve()
  }
});

// after, with implicit promise as the value of the 'payload' property
const bar = () => ({
  type: 'BAR',
  payload: Promise.resolve()
});

Of course, if you prefer the explicit syntax, this still works. This syntax is also required for optimistic updates.

// after, but with explicit 'promise' property and 'data' property
const bar = () => ({
  type: 'BAZ',
  payload: {
    promise: Promise.resolve(),
    data: ...
  }
});

Fourth, thunks are no longer bound to the promise. If you are chaining actions with Redux Thunk, this is critical change.

// before, with Redux Thunk
const foo = () => ({
  type: 'FOO',
  payload: {
    promise: new Promise((resolve, reject) => {
      ...
    }).then(
      value => (action, dispatch) => {
        // handle fulfilled
        dispatch(someSuccessHandlerActionCreator());
      },
      reason => (action, dispatch) => {
        // handle rejected
        dispatch(someErrorHandlerActionCreator());
      }
    )
  }
});

// after, with Redux Thunk
const bar = () => {
  return (dispatch, getState) => {


    return dispatch({
      type: 'FOO',
      payload: Promise.resolve('foo')
    }).then(
      ({ value, action }) => {
        console.log(value); // => 'foo'
        console.log(action.type); // => 'FOO_FULFILLED'
        dispatch(someSuccessHandlerActionCreator());
      },
      ({ reason, action }) => {
        // handle rejected
        dispatch(someErrorHandlerActionCreator());
      }
    );
  };
};

This release binds the first argument of any function given to Promise.resolve to a partial action object so one can access the original meta and an appropriate type within their thunk.

Fixes a critical bug in version 2.2.2. :fire: :fire_engine:

Please note that version 2.2.2 has also been deprecated on npm.

With the previous release, dispatched actions are set through the entire stack of middleware.

const actionCreator = () => ({
  type: 'EXAMPLE_TYPE',
  payload: {
    promise: Promise.resolve({
      type: 'RESOLVED_ACTION' 
      payload: ...
    })
   }
});

However, this middleware does not check to see if the resolved or rejected parameter is a function. This release adds a check for thunk /function before resolving or rejecting as payload.

For example, now the following will also work:

const actionCreator = () => ({
  type: 'EXAMPLE_TYPE',
  payload: {
    promise: Promise.resolve((dispatch, getState) => {
      dispatch({ type: 'RESOLVED_ACTION', payload: '' })
      dispatch(someActionCreatorThatMaybeUpdatesTheRoute())
      doSomethingNaughtyAfterDispatchingEverything(getState())
    })
   }
});

This is not a breaking change.

Instead of calling next() to dispatch rejected and fulfilled actions, the middleware now recalls dispatch() and dispatches entirely new actions. This is not a breaking change.

Breaking Changes :fire:

• In the case that the promise resolves null, the middleware will dispatch an empty object instead of dispatching null.

Adds

• Custom type suffixes
  • promiseMiddleware is now a function that accepts options and returns the middleware to apply
  • Action.type now expects a single type value instead of an array
• Minor bug fixes

Breaking Changes :fire:

The middleware must now be initiliazed like this:

composeStoreWithMiddleware = applyMiddleware(
  promiseMiddleware()
)(createStore);

Previously it was:

composeStoreWithMiddleware = applyMiddleware(
  promiseMiddleware
)(createStore);