@@ -318,30 +318,36 @@ export default function TestComponent(props) {
318
318
}
319
319
` ` ` `
320
320
321
- ### useAsyncState
321
+ ### useAsyncDeepState
322
322
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 .
327
327
328
328
` ` ` ` javascript
329
- export default function TestComponent7 (props ) {
330
-
331
- const [counter , setCounter ] = useAsyncState (0 );
329
+ export default function TestComponent (props ) {
332
330
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
+ });
336
336
337
337
return (
338
338
< 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>
340
341
< 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 } ` );
343
347
}}> 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>
345
351
< / div>
346
352
);
347
353
}
@@ -446,12 +452,12 @@ the iterator interface in the following order:
446
452
````javascript
447
453
const [decoratedFn, cancel, pending, done, result, error, canceled]= useAsyncCallback(/* code*/ );
448
454
````
449
- ### useAsyncState ([initialValue]): ([value: any, accessor: function])
455
+ ### useAsyncDeepState ([initialValue?: object ]): ([value: any, accessor: function])
450
456
#### arguments
451
457
- `initialValue`
452
458
#### returns
453
459
Iterable of:
454
- - `value: any ` - current state value
460
+ - `value: object ` - current state value
455
461
- `accessor:(newValue)=>Promise<rawStateValue:any>` - promisified setter function that can be used
456
462
as a getter if called without arguments
457
463
0 commit comments