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.

Example

• Usage
  • Step 1
  • Step 2
• API
  • MakeAsyncFunction: React.Component<Props>
• Types
  • Props
    • start: string
    • resolve: string
    • reject: string
    • setPayload?: (action: Object, payload: any) => Object
    • getPayload?: (action: Object) => any
    • getError?: (action: Object) => any

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 'react-redux-promise-listener'
import { promiseListener } from './store'

...

<MakeAsyncFunction
  listener={promiseListener}
  start="START_ACTION_TYPE"     // the type of action to dispatch when this function is called
  resolve="RESOLVE_ACTION_TYPE" // the type of action that will resolve the promise
  reject="REJECT_ACTION_TYPE"   // the type of action that will reject the promise
>{asyncFunc => (
  <SomeFormLibrary onSubmit={asyncFunc}>

    ...

    <button type="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.