erikras / react-redux-promise-listener

A React component and Redux middleware that allows actions to be converted into Promises

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.