@t8/react-store 1.0.35 → 1.0.37
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 +7 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# T8 React Store
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
*Small React app state management lib aligned with React's state pattern, condensed to the essentials*
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@t8/react-store)   
|
|
6
6
|
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
- Similar to `useState()`
|
|
23
|
-
- No boilerplate
|
|
24
23
|
- Quick transition from local state
|
|
24
|
+
- No boilerplate
|
|
25
25
|
- Easily integrates with Immer
|
|
26
26
|
- SSR- and CSR-compatible
|
|
27
27
|
|
|
@@ -66,7 +66,7 @@ Moving the local state to the full-fledged shared state:
|
|
|
66
66
|
|
|
67
67
|
🔹 The shared state setup shown above is very similar to `useState()` allowing for quick migration from local state to shared state or the other way around.
|
|
68
68
|
|
|
69
|
-
🔹 The `false` parameter in `useStore(store, false)` (as in `<ResetButton>` above) tells the hook not to subscribe the component to tracking the store state updates. The common use case is when a component makes use of the store state setter without using the store state value.
|
|
69
|
+
🔹 The optional `false` parameter in `useStore(store, false)` (as in `<ResetButton>` above) tells the hook not to subscribe the component to tracking the store state updates. The common use case is when a component makes use of the store state setter without using the store state value.
|
|
70
70
|
|
|
71
71
|
🔹 Similarly to instances of the built-in data container classes, such as `Set` and `Map`, stores are created as `new Store(data)` rather than with a factory function.
|
|
72
72
|
|
|
@@ -84,7 +84,7 @@ When only the store state setter is required, without the store state value, we
|
|
|
84
84
|
let [, setState] = useState(store, false);
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
-
Apart from a boolean, `useStore(store, shouldUpdate)` accepts a function of `(nextState, prevState) => boolean` as the second parameter to filter store updates to respond to:
|
|
87
|
+
Apart from a boolean, `useStore(store, shouldUpdate)` accepts a function of `(nextState, prevState) => boolean` as the optional second parameter to filter store updates to respond to:
|
|
88
88
|
|
|
89
89
|
```jsx
|
|
90
90
|
import { useStore } from "@t8/react-store";
|
|
@@ -104,6 +104,8 @@ let ItemCard = ({ id }) => {
|
|
|
104
104
|
};
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
+
While `useStore(itemStore)` in this component would trigger a re-render in response to any changes in the `itemStore` (which can be fine with a small store), with `useStore(itemStore, hasRelevantUpdates)` the `ItemCard` component has a more targeted subscription to the store: a re-render will only be triggered if the `revision` property of the item with the given `id` has changed.
|
|
108
|
+
|
|
107
109
|
## Providing shared state
|
|
108
110
|
|
|
109
111
|
Shared state can be provided to the app by means of a regular React Context provider:
|
|
@@ -156,7 +158,7 @@ let ItemCard = ({ id }) => {
|
|
|
156
158
|
|
|
157
159
|
## Store data
|
|
158
160
|
|
|
159
|
-
A store can contain data of any type. With TypeScript, the type of a store containing data of type `T` is `Store<T>` which can be inferred from
|
|
161
|
+
A store can contain data of any type. With TypeScript, the type of a store containing data of type `T` is `Store<T>` which can be inferred from `data` passed to `new Store(data)`.
|
|
160
162
|
|
|
161
163
|
Live demos:<br>
|
|
162
164
|
[Primitive value state](https://codesandbox.io/p/sandbox/rtng37?file=%2Fsrc%2FPlusButton.jsx)<br>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@t8/react-store",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.37",
|
|
4
|
+
"description": "Small React app state management lib aligned with React's state pattern, condensed to the essentials",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"type": "module",
|