Redux Promise Listener generates an async function that will dispatch a start action, and will resolve or reject the promise when a resolve or reject action is dispatched.
Libraries like redux-promise or redux-promise-middleware are useful for converting promises to actions. Redux Promise Listener does the inverse: converting actions to promises.
Most of the popular form libraries accept an onSubmit function that is expected to return a Promise that resolves when the submission is complete, or rejects when the submission fails. This mechanism is fundamentally incompatible with action management libraries like redux-saga, which perform side-effects (e.g. ajax requests) in a way that does not let the submission function easily return a promise. Redux Promise Listener is a potential solution.
Create and add the middleware as you would with any Redux middleware. Remember to export the middleware!
// store.js
import { createStore, applyMiddleware } from 'redux'
import createReduxPromiseListener from 'redux-promise-listener'
const reduxPromiseListener = createReduxPromiseListener
const store = createStore(
reducer,
initialState,
applyMiddleware(...otherMiddleware, reduxPromiseListener.middleware)
)
export const promiseListener = reduxPromiseListener // <---- ⚠️ IMPORTANT ⚠️
export default storeIf you are using react-redux, your Step 2 is over here.
...
Okay, now that those React nerds are gone...
Wherever you need an async function that dispatches one action and listens for others...
// someFile.js
import { promiseListener } from './store.js'
const generatedAsyncFunction = promiseListener.generateAsyncFunction(
'START_ACTION_TYPE', // the type of action to dispatch when this function is called
'RESOLVE_ACTION_TYPE', // the type of action that will resolve the promise
'REJECT_ACTION_TYPE' // the type of action that will reject the promise
)
// This structure is in the shape:
// {
// asyncFunction, <--- the async function that dispatches the start action and returns a Promise
// unsubscribe <--- a function to unsubscribe from the Redux store
// }
// dispatches an action { type: 'START_ACTION_TYPE', payload: values }
generatedAsyncFunction.asyncFunction(values).then(
// called with action.payload when an action of
// type 'RESOLVE_ACTION_TYPE' is dispatched
resolvePayload => {
// do happy stuff 😄
},
// called with action.payload when an action of
// type 'REJECT_ACTION_TYPE' is dispatched
rejectPayload => {
// do sad stuff 😢
}
)
// when done, to prevent memory leaks
generatedAsyncFunction.unsubscribe()The default export of this library. Creates a Redux middleware, but that also has a function on it called generateAsyncFunction
An object with the following values:
Redux middleware that should be used when creating your Redux store.
Takes a Config and returns an object containing the async function capable of dispatching an action and resolving/rejecting a Promise upon the dispatch of specified actions, and a function to unsubscribe this listener from the Redux store.
An object with the following values:
The type of action to dispatch when the function is called.
The type of action that will cause the promise to be resolved.
The type of action that will cause the promise to be rejected.
A function to set the payload (the parameter passed to the async function). Defaults to (action, payload) => ({ ...action, payload }).
A function to get the payload out of the resolve action to pass to resolve the promise with. Defaults to (action) => action.payload.
A function to get the error out of the reject action to pass to reject the promise with. Defaults to (action) => action.payload.
An object with the following values:
The async function that will dispatch the start action and return a promise that will resolve when the resolve action is dispatched or reject when the reject action is dispatched.
A cleanup function that should be called when the async function is no longer needed.
unsubscribe() may result in a memory leak.
If you are using react-redux-promise-listener, this is done for you on componentWillUnmount.