Skip to content

Commit 11eb17f

Browse files
Refactored useAsyncState to useAsyncDeepState;
Added support for deep state handling using the `useAsyncDeepState` hook; Added pause&resume support for `useAsyncEffect`&`useAsyncCallback` hooks; Fixed missing export of the `E_REASON_QUEUE_OVERFLOW` constant;
1 parent d388605 commit 11eb17f

10 files changed

+421
-122
lines changed

README.md

+23-17
Original file line numberDiff line numberDiff line change
@@ -318,30 +318,36 @@ export default function TestComponent(props) {
318318
}
319319
````
320320

321-
### useAsyncState
321+
### useAsyncDeepState
322322

323-
A simple enhancement of the useState hook for use inside async routines.
324-
The only difference, the setter function returns a promise, that will be resolved with the current raw state value.
325-
If no arguments provided, it will return the current raw state value without changing the state.
326-
It's not guaranteed that the resolved state is the final computed state value.
323+
An enhancement of the useState hook for use inside async routines.
324+
It defines a deep state abd works very similar to the React `setState` class method.
325+
The hook returns a promise that will be fulfilled with an array of newState and oldState values
326+
after the state has changed.
327327

328328
````javascript
329-
export default function TestComponent7(props) {
330-
331-
const [counter, setCounter] = useAsyncState(0);
329+
export default function TestComponent(props) {
332330

333-
const [fn, cancel, pending, done, result, err] = useAsyncCallback(function* (value) {
334-
return (yield cpAxios(`https://rickandmortyapi.com/api/character/${value}`)).data;
335-
}, {states: true})
331+
const [state, setState] = useAsyncDeepState({
332+
foo: 123,
333+
bar: 456,
334+
counter: 0
335+
});
336336

337337
return (
338338
<div className="component">
339-
<div>{pending ? "loading..." : (done ? err ? err.toString() : JSON.stringify(result, null, 2) : "")}</div>
339+
<div className="caption">useAsyncDeepState demo:</div>
340+
<div>{state.counter}</div>
340341
<button onClick={async()=>{
341-
const updatedValue= await setCounter((counter)=> counter + 1);
342-
await fn(updatedValue); // pass the state value as an argument
342+
const [newState, oldState]= await setState((state)=> {
343+
return {counter: state.counter + 1}
344+
});
345+
346+
console.log(`Updated: ${newState.counter}, old: ${oldState.counter}`);
343347
}}>Inc</button>
344-
{<button onClick={cancel} disabled={!pending}>Cancel async effect</button>}
348+
<button onClick={()=>setState({
349+
counter: state.counter
350+
})}>Set the same state value</button>
345351
</div>
346352
);
347353
}
@@ -446,12 +452,12 @@ the iterator interface in the following order:
446452
````javascript
447453
const [decoratedFn, cancel, pending, done, result, error, canceled]= useAsyncCallback(/*code*/);
448454
````
449-
### useAsyncState([initialValue]): ([value: any, accessor: function])
455+
### useAsyncDeepState([initialValue?: object]): ([value: any, accessor: function])
450456
#### arguments
451457
- `initialValue`
452458
#### returns
453459
Iterable of:
454-
- `value: any` - current state value
460+
- `value: object` - current state value
455461
- `accessor:(newValue)=>Promise<rawStateValue:any>` - promisified setter function that can be used
456462
as a getter if called without arguments
457463

0 commit comments

Comments
 (0)