redux-promise
FSA-compliant promise middleware for Redux.
Last updated 2 years ago by timche .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install redux-promise 
SYNC missed versions from official npm registry.

redux-promise

build status codecov npm version npm monthly downloads

FSA-compliant promise middleware for Redux.

npm install --save redux-promise

Usage

import promiseMiddleware from 'redux-promise';

The default export is a middleware function. If it receives a promise, it will dispatch the resolved value of the promise. It will not dispatch anything if the promise rejects.

If it receives an Flux Standard Action whose payload is a promise, it will either

  • dispatch a copy of the action with the resolved value of the promise, and set status to success.
  • dispatch a copy of the action with the rejected value of the promise, and set status to error.

The middleware returns a promise to the caller so that it can wait for the operation to finish before continuing. This is especially useful for server-side rendering. If you find that a promise is not being returned, ensure that all middleware before it in the chain is also returning its next() call to the caller.

Using in combination with redux-actions

Because it supports FSA actions, you can use redux-promise in combination with redux-actions.

Example: Async action creators

This works just like in Flummox:

createAction('FETCH_THING', async id => {
  const result = await somePromise;
  return result.someValue;
});

Unlike Flummox, it will not perform a dispatch at the beginning of the operation, only at the end. We're still looking into the best way to deal with optimistic updates. If you have a suggestion, let me know.

Example: Integrating with a web API module

Say you have an API module that sends requests to a server. This is a common pattern in Flux apps. Assuming your module supports promises, it's really easy to create action creators that wrap around your API:

import { WebAPI } from '../utils/WebAPI';

export const getThing = createAction('GET_THING', WebAPI.getThing);
export const createThing = createAction('POST_THING', WebAPI.createThing);
export const updateThing = createAction('UPDATE_THING', WebAPI.updateThing);
export const deleteThing = createAction('DELETE_THING', WebAPI.deleteThing);

(You'll probably notice how this could be simplified even further using something like lodash's mapValues().)

Current Tags

  • 0.6.0                                ...           latest (2 years ago)
  • 0.6.0-alpha                                ...           prerelease (5 years ago)

11 Versions

  • 0.6.0                                ...           2 years ago
  • 0.5.3                                ...           5 years ago
  • 0.5.2                                ...           5 years ago
  • 0.5.1                                ...           5 years ago
  • 0.6.0-alpha                                ...           5 years ago
  • 0.5.0                                ...           5 years ago
  • 0.4.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Downloads
Today 18
This Week 18
This Month 1,056
Last Day 24
Last Week 679
Last Month 3,161
Dependencies (2)
Dev Dependencies (12)
Dependents (265)

Copyright 2014 - 2017 © taobao.org |