@t8/react-pending 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -8
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Self-contained async action state management for React apps
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
**Features:** Decoupled from app state management and async actions' internals · Local or shared async action state · CSR/SSR-compatible
|
|
5
|
+
**Features:** Concise API for async state tracking, local or shared · Decoupled from app state management and async actions' internals · CSR/SSR-compatible
|
|
8
6
|
|
|
9
7
|
<!-- docsgen-show-start --
|
|
10
8
|
```diff
|
|
@@ -12,7 +10,7 @@ Self-contained async action state management for React apps
|
|
|
12
10
|
|
|
13
11
|
export let ItemList = () => {
|
|
14
12
|
let [items, setItems] = useState([]);
|
|
15
|
-
+ let { initial, pending, error, track } = usePendingState(
|
|
13
|
+
+ let { initial, pending, error, track } = usePendingState();
|
|
16
14
|
|
|
17
15
|
useEffect(() => {
|
|
18
16
|
- fetchItems().then(setItems);
|
|
@@ -27,8 +25,6 @@ Self-contained async action state management for React apps
|
|
|
27
25
|
```
|
|
28
26
|
-- docsgen-show-end -->
|
|
29
27
|
|
|
30
|
-
Installation: `npm i @t8/react-pending`
|
|
31
|
-
|
|
32
28
|
## Shared pending state
|
|
33
29
|
|
|
34
30
|
Objective: Track the pending state of the asynchronous action `fetchItems()` to tell the user whether the UI is busy handling the async action or encountered an error, without rewriting the action and the app's state management.
|
|
@@ -72,7 +68,7 @@ In our setup, there are two components rendering their content with regard to th
|
|
|
72
68
|
|
|
73
69
|
⬥ To share the async action's pending state with multiple components we're using the string key parameter of `usePendingState(stateKey)`. This key can be used with `usePendingState(stateKey)` in other components to refer to the same pending state (as in the `Status` component above), so `stateKey` should be unique to the particular pending state.
|
|
74
70
|
|
|
75
|
-
⬥ In the example above, the data returned from the async action is stored in the component's local state, but it can be stored in any app state of the developer's choice without affecting how the `usePendingState()` hook is used.
|
|
71
|
+
⬥ In the example above, the data returned from the async action (the `items` array) is stored in the component's local state, but it can be stored in any app state of the developer's choice without affecting how the `usePendingState()` hook is used.
|
|
76
72
|
|
|
77
73
|
## Local pending state
|
|
78
74
|
|
|
@@ -90,7 +86,7 @@ Omit the custom string key parameter of `usePendingState()` to scope the pending
|
|
|
90
86
|
+ track(fetchItems(), { silent: true })
|
|
91
87
|
```
|
|
92
88
|
|
|
93
|
-
⬥ This option prevents the `pending` property from switching to `
|
|
89
|
+
⬥ This option prevents the `pending` property from switching to `true` in the pending state.
|
|
94
90
|
|
|
95
91
|
## Delayed pending state
|
|
96
92
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@t8/react-pending",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "Self-contained async action state management for React apps",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"@playwright/test": "^1.56.0",
|
|
33
33
|
"@t8/serve": "^0.2.0",
|
|
34
34
|
"@types/node": "^24.10.2",
|
|
35
|
-
"@types/react": "^19.2.
|
|
35
|
+
"@types/react": "^19.2.9",
|
|
36
36
|
"@types/react-dom": "^19.2.3",
|
|
37
37
|
"react-dom": "^19.2.3"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@t8/react-store": "^1.2.
|
|
40
|
+
"@t8/react-store": "^1.2.9"
|
|
41
41
|
}
|
|
42
42
|
}
|