Package Exports

react-redux-dispatch-async

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-dispatch-async) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-redux-dispatch-async

👉 REDUX middleware & HOOK 🎉 waiting async actions with SUFFIXES 👈


      +------------------+
      | ACTION_REQUESTED |----+
      +------------------+    |      +------------------+
                              +----->| ACTION_SUCCEEDED |
                              |      +------------------+
                              |
                              |      +--------------------+
                              +----->|   ACTION_FAILED    |
                              |      +--------------------+
                              |
                              |      +--------------------+
                              +----->|  ACTION_CANCELED  |
                                     +--------------------+

Install

yarn add react-redux-dispatch-async

Examples

Usage

import React from 'react'
import { useDispatchAsync } from 'react-redux-dispatch-async'

export default function MyUserInterface({ id }: { id: string }) {
  // 👉 pass action and arguments into the array
  const { status, result, error } = useDispatchAsync(getUserActionRequest, [id])

  switch (status) {
    case 'loading':
      return <AppLoader />
    case 'error':
      return <Text>{error.message}</Text>
    case 'success':
      return <User {...result} />
    case 'timeout':
      return <Text>{'timeout ¯\\_(ツ)_//¯'}</Text>
    case 'canceled':
      return <Text>{'canceled ¯\\_(ツ)_//¯'}</Text>
    default:
      return null
  }
}

If you need more examples you can go to github or to codesandbox.

Configuration

import { createStore, applyMiddleware } from 'redux'
import { createDispatchAsyncMiddleware } from 'react-redux-dispatch-async'
import reducers from 'reducers'

const store = createStore(
  reducers,
  applyMiddleware(
    createDispatchAsyncMiddleware({
      request: 'REQUEST', // 👈 define your own async suffixes
      success: 'SUCCESS',
      failure: 'FAILURE',
      cancel: 'CANCEL', // optional
    }),
  ),
)

Default suffixes

[...]_REQUESTED
[...]_SUCCEEDED
[...]_FAILED
[...]_CANCELED

Two functions

Configuration

dispatchAsyncMiddleware: (c?: {
  request: string
  success: string
  failure: string
  cancel?: string
}) => redux.Middleware

Type

// main hook
type useDispatchAsync = <R = any>(
  actionFunction?: (...args: any[]) => Action<T>,
  deps: any[] = [],
) => UseDispatchAsync<R>

/// return type
export interface UseDispatchAsync<R = any> {
  status: 'loading' | 'success' | 'error'
  result?: R
  error?: Error
}

// other types for oldest usage
interface DispatchAsyncResultSuccess<T = any> {
  success: true
  result: T
}
interface DispatchAsyncResultError {
  success: false
  error: Error
}
export type DispatchAsyncResult<T = any> =
  | DispatchAsyncResultSuccess<T>
  | DispatchAsyncResultError

Hire an expert!

Looking for a ReactNative freelance expert with more than 14 years experience? Contact me from my website!