Skip to content

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

License

Notifications You must be signed in to change notification settings

erikras/react-redux-promise-listener

Repository files navigation

React Redux Promise Listener

NPM Downloads Build Status codecov.io styled with prettier

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

Edit 🏁 React Final Form - Async Redux Submission

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.

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published