React Redux Promise Listener
Why?
Most of the popular React 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. React Redux Promise Listener is a potential solution.
Usage
Step 1
Step 1 involves installing Redux middleware and is detailed here in the docs of Redux Promise Listener.
Step 2
Welcome back! You may now create an async function in your React code like so:
import MakeAsyncFunction from 'redux-promise-listener'import promiseListener from './store' ... <MakeAsyncFunction = ="START_ACTION_TYPE" // ="RESOLVE_ACTION_TYPE" // ="REJECT_ACTION_TYPE" // > <SomeFormLibrary => ... <button ="submit">Submit</button> </SomeFormLibrary></MakeAsyncFunction>
API
MakeAsyncFunction: React.Component<Props>
A react component that passes an async function to its child render prop.
Types
Props
start: string
The type
of action to dispatch when the function is called.
resolve: string
The type
of action that will cause the promise to be resolved.
reject: string
The type
of action that will cause the promise to be rejected.
setPayload?: (action: Object, payload: any) => Object
A function to set the payload (the parameter passed to the async function). Defaults to (action, payload) => ({ ...action, payload })
.
getPayload?: (action: Object) => any
A function to get the payload out of the resolve action to pass to resolve the promise with. Defaults to (action) => action.payload
.
getError?: (action: Object) => any
A function to get the error out of the reject action to pass to reject the promise with. Defaults to (action) => action.payload
.