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

A redux middleware to be able to wait async actions (ie. side effects) with fixed defined suffixes.

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

Install

yarn add react-redux-dispatch-async

Default suffixes

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

Two functions

Configuration

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

Usage

useDispatchAsync(action: Action): Promise<DispatchAsyncResult<any>>

Return types

interface DispatchAsyncResultSuccess<T = any> {
  success: true
  result: T
}

interface DispatchAsyncResultError {
  success: false
  error: Error
}

export type DispatchAsyncResult<T = any> =
  | DispatchAsyncResultSuccess<T>
  | DispatchAsyncResultError

Examples

Configuration

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

const store = createStore(
  reducers,
  applyMiddleware(
    dispatchAsyncMiddleware({
      request: 'REQUEST',
      success: 'SUCCESS',
      failure: 'FAILURE',
    }),
  ),
)

Usage

import React, { useEffect, useState } from 'react'
import { useDispatchAsync } from 'redux-dispatch-async'
import { useSelector, useDispatch } from 'react-redux'

export default function MyUserInterface() {
  const [loaded, setLoaded] = useState(false)

  const data = useSelector(state => state.data)
  const dispatchAsync = useDispatchAsync()
  const otherActionAsync = useDispatchAsync(otherAction())
  useEffect(() => {
    dispatchAsync(loadRequest())
      .then(() => otherActionAsync())
      .then(() => setLoaded(true))
  }, [])
  return loaded ? <AnotherComponent {...{ data }} /> : <AppLoader />
}