Repository files navigation

FSA-compliant promisemiddleware for Redux.

npminstall--saveredux-promise

importpromiseMiddlewarefrom'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 whosepayload is a promise, it will either

• dispatch a copy of the action with the resolved value of the promise, and setstatus tosuccess.
• dispatch a copy of the action with the rejected value of the promise, and setstatus toerror.

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 itsnext() call to the caller.

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

This works just like in Flummox:

createAction('FETCH_THING',asyncid=>{constresult=awaitsomePromise;returnresult.someValue;});

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

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';exportconstgetThing=createAction('GET_THING',WebAPI.getThing);exportconstcreateThing=createAction('POST_THING',WebAPI.createThing);exportconstupdateThing=createAction('UPDATE_THING',WebAPI.updateThing);exportconstdeleteThing=createAction('DELETE_THING',WebAPI.deleteThing);

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