@bytesoftio/use-action
Installation
yarn add @bytesoftio/use-action or npm install @bytesoftio/use-action
Table of contents
Description
This package is built on top of @bytesoftio/use-async. The purpose of this package is to be able to encapsulate any async operation into a standardized handle that can be run on demand and awaited. Example use case: You have an async operation, like send some data to an endpoint, you create an async action and trigger it when the time is right. You don't have to worry about state related things like loading, result, error handling, etc. It's all available for you within the handle.
Usage
useAction
import React, { useState } from "react"
import { useAction } from "@bytesoftio/use-action"
const LikeButton = () => {
const [likesCount, setLikesCount] = useState(0)
const likeAction = useAction(async (count: number) => {
// some http magic
return count
})
const onClick = async () => {
if ( ! likeAction.loading) {
await likeAction.run(likesCount)
if ( ! likeAction.error) {
setLikesCount(likeAction.result)
}
}
}
return (
<button onClick={onClick}>Like {likesCount}</button>
)
}
Type aliases
Action
Action<TResult, TArgs>: (...args: TArgs) => Promise<TResult | undefined>
Type parameters
Type declaration
-
- (...args: TArgs): Promise<TResult | undefined>
-
Parameters
Returns Promise<TResult | undefined>
ActionHandle
Action
Handle<TResult, TActionArgs>: { error: any | undefined; errored: boolean; loading: boolean; result: TResult | undefined; run: Action<TResult, TActionArgs> }Type parameters
-
TResult
-
TActionArgs: any[]
Type declaration
-
error: any | undefined
-
errored: boolean
-
loading: boolean
-
result: TResult | undefined
-
run: Action<TResult, TActionArgs>
UseAction
Use
Action: <TResult, TActionArgs>(action: Action<TResult, TActionArgs>) => ActionHandle<TResult, TActionArgs>
Type declaration
-
- <TResult, TActionArgs>(action: Action<TResult, TActionArgs>): ActionHandle<TResult, TActionArgs>
-
Type parameters
-
TResult
-
TActionArgs: any[]
Parameters
-
action: Action<TResult, TActionArgs>
Returns ActionHandle<TResult, TActionArgs>
Functions
Const useAction
- useAction<TResult, TActionArgs>(action: any): { error: any; errored: boolean; loading: boolean; result: undefined | TResult; run: (...args: TArgs) => Promise<TResult | undefined> }
-
Type parameters
-
TResult
-
TActionArgs: any[]
Parameters
Returns { error: any; errored: boolean; loading: boolean; result: undefined | TResult; run: (...args: TArgs) => Promise<TResult | undefined> }
-
error: any
-
errored: boolean
-
loading: boolean
-
result: undefined | TResult
-
run: (...args: TArgs) => Promise<TResult | undefined>
-
- (...args: TArgs): Promise<TResult | undefined>
-
Parameters
Returns Promise<TResult | undefined>