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

Features

Race condition to execute only the promise if multiple update occur in nearly same time

> Dig into it

Hook give you helpful STATUS you can deal with into your own component

⏳ loading: action start but not yet completed
👏 success: action completed, you can get the result
😱 error: action failed and you can get the error
👎 timeout: action not completed for tool long (ie. options?.timeoutInMilliseconds)
👋 canceled: action canceled
😮 unknown: should never happen

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
interface Options {
  timeoutInMilliseconds?: number
}
type useDispatchAsync = <R = any>(
  actionFunction?: (...args: any[]) => Action<T>,
  deps: any[] = [],
  options: Options = { timeoutInMilliseconds: 15000 }, // wait 15s
) => UseDispatchAsync<R>

/// return type
interface ResultLoading {
  status: 'loading'
}

interface ResultSuccess<R = unknown> {
  status: 'success'
  result: R
}

interface ResultError {
  status: 'error'
  error: Error
}

interface ResultCancel {
  status: 'canceled'
}

interface ResultTimeout {
  status: 'timeout'
}

interface ResultUnknown {
  status: 'unknown'
}

export type UseDispatchAsync<R = unknown> =
  | ResultLoading
  | ResultSuccess<R>
  | ResultError
  | ResultTimeout
  | ResultCancel
  | ResultUnknown

// 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!