Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xcarpentier/react-redux-dispatch-async
🎸 react-redux hook & redux middleware to be able to wait for async actions with fixed defined suffixes
https://github.com/xcarpentier/react-redux-dispatch-async
async async-actions react react-hooks redux
Last synced: 20 days ago
JSON representation
🎸 react-redux hook & redux middleware to be able to wait for async actions with fixed defined suffixes
- Host: GitHub
- URL: https://github.com/xcarpentier/react-redux-dispatch-async
- Owner: xcarpentier
- Created: 2019-09-23T15:18:21.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:02:26.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T21:21:59.364Z (7 months ago)
- Topics: async, async-actions, react, react-hooks, redux
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-redux-dispatch-async-rij31
- Size: 1.04 MB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# react-redux-dispatch-async
👉 REDUX _middleware_ & **HOOK** 🎉 waiting async _actions_ with **SUFFIXES** 👈
```tsx
import { useDispatchAsync } from 'react-redux-dispatch-async'
export default function MyUserInterface({ id }: { id: string }) {
// 👉 pass action and arguments into the array
const response = useDispatchAsync(getUserActionRequest, [id])
switch (response.status) {
case 'loading':
return
case 'error':
return {response.error.message}
case 'success':
return
case 'timeout':
return {'timeout ¯\\_(ツ)_//¯'}
case 'canceled':
return {'canceled ¯\\_(ツ)_//¯'}
default:
return null
}
}
```
If you need more examples you can go to [github](https://github.com/xcarpentier/react-redux-dispatch-async-example) or to [codesandbox](https://codesandbox.io/s/react-redux-dispatch-async-rij31?file=/src/UserContainer.tsx).
## Install
`yarn add react-redux-dispatch-async`
## Features
```
+------------------+
| ACTION_REQUESTED |----+
+------------------+ | +------------------+
+----->| ACTION_SUCCEEDED |
| +------------------+
|
| +--------------------+
+----->| ACTION_FAILED |
| +--------------------+
|
| +--------------------+
+----->| ACTION_CANCELED |
+--------------------+
```
### Race condition to execute only the promise if multiple update occur in nearly same time
[> Dig into it](https://github.com/xcarpentier/react-redux-dispatch-async/blob/master/src/useDispatchAsync.ts#L65)
### 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 too long (ie. options?.timeoutInMilliseconds)
- 👋 **`canceled`**: action canceled
- 😮 **`unknown`**: should never happen
### Configuration
```ts
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
```ts
dispatchAsyncMiddleware: (c?: {
request: string
success: string
failure: string
cancel?: string
}) => redux.Middleware
```
### Type
```ts
// main hook
interface Options {
timeoutInMilliseconds?: number
}
type useDispatchAsync = (
actionFunction?: (...args: any[]) => Action,
deps: any[] = [],
options: Options = { timeoutInMilliseconds: 15000 }, // wait 15s
) => UseDispatchAsync
/// return type
interface ResultLoading {
status: 'loading'
}
interface ResultSuccess {
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 =
| ResultLoading
| ResultSuccess
| ResultError
| ResultTimeout
| ResultCancel
| ResultUnknown
// other types for oldest usage
interface DispatchAsyncResultSuccess {
success: true
result: T
}
interface DispatchAsyncResultError {
success: false
error: Error
}
export type DispatchAsyncResult =
| DispatchAsyncResultSuccess
| DispatchAsyncResultError
```
## Hire an expert!
Looking for a ReactNative freelance expert with more than 14 years experience? Contact me from my [website](https://xaviercarpentier.com)!