React Redux Promise Listener Hook

This is a hook version of react-redux-promise-listener by Erik Rasmussen.

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
- useAsyncFunction: (config: Config, promiseListener: PromiseListener) => Promise<any>
Types
- Config
- PromiseListener

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

...

const config = {
  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
}
const asyncFunc = useAsyncFunction(config, promiseListener);

<SomeFormLibrary onSubmit={asyncFunc}>

  ...

  <button type="submit">Submit</button>
</SomeFormLibrary>

API

`useAsyncFunction: (config: Config, promiseListener: PromiseListener) => Promise<any>`

A React hook that creates an async function.

Types

`Config`

`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.

`PromiseListener`

See the redux-promise-listener documentation.

License

mikkom/react-redux-promise-listener-hook

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages