react-redux-dispatch-async

import{useDispatchAsync}from'react-redux-dispatch-async'exportdefaultfunctionMyUserInterface({ id}:{id:string}){// 👉 pass action and arguments into the arrayconstresponse=useDispatchAsync(getUserActionRequest,[id])switch(response.status){case'loading':return<AppLoader/>case'error':return<Text>{response.error.message}</Text>case'success':return<User{...response.result}/>case'timeout':return<Text>{'timeout ¯\\_(ツ)_//¯'}</Text>case'canceled':return<Text>{'canceled ¯\\_(ツ)_//¯'}</Text>default:returnnull}}

Install

Features

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

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

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

Configuration

import{createStore,applyMiddleware}from'redux'import{createDispatchAsyncMiddleware}from'react-redux-dispatch-async'importreducersfrom'reducers'conststore=createStore(reducers,applyMiddleware(createDispatchAsyncMiddleware({request:'REQUEST',// 👈 define your own async suffixessuccess:'SUCCESS',failure:'FAILURE',cancel:'CANCEL',// optional}),),)

Default suffixes

Two functions

Configuration

dispatchAsyncMiddleware:(c?:{request:stringsuccess:stringfailure:stringcancel?:string})=>redux.Middleware

Type

// main hookinterfaceOptions{timeoutInMilliseconds?:number}typeuseDispatchAsync=<R=any>(actionFunction?:(...args:any[])=>Action<T>,deps:any[]=[],options:Options={timeoutInMilliseconds:15000},// wait 15s)=>UseDispatchAsync<R>/// return typeinterfaceResultLoading{status:'loading'}interfaceResultSuccess<R=unknown>{status:'success'result:R}interfaceResultError{status:'error'error:Error}interfaceResultCancel{status:'canceled'}interfaceResultTimeout{status:'timeout'}interfaceResultUnknown{status:'unknown'}exporttypeUseDispatchAsync<R=unknown>=|ResultLoading|ResultSuccess<R>|ResultError|ResultTimeout|ResultCancel|ResultUnknown// other types for oldest usageinterfaceDispatchAsyncResultSuccess<T=any>{success:trueresult:T}interfaceDispatchAsyncResultError{success:falseerror:Error}exporttypeDispatchAsyncResult<T=any>=|DispatchAsyncResultSuccess<T>|DispatchAsyncResultError

Hire an expert!