@t8/react-store 1.0.27 → 1.0.28
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 +23 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -71,6 +71,8 @@ let [, setState] = useState(store, false);
|
|
|
71
71
|
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:
|
|
72
72
|
|
|
73
73
|
```jsx
|
|
74
|
+
import { useStore } from "@t8/react-store";
|
|
75
|
+
|
|
74
76
|
let ItemCard = ({ id }) => {
|
|
75
77
|
// Definition of changes in the item
|
|
76
78
|
let hasRelevantUpdates = useCallback((nextItems, prevItems) => {
|
|
@@ -90,41 +92,43 @@ let ItemCard = ({ id }) => {
|
|
|
90
92
|
|
|
91
93
|
Shared state can be provided to the app by means of a regular React Context provider:
|
|
92
94
|
|
|
93
|
-
```
|
|
94
|
-
import { createContext } from "react";
|
|
95
|
+
```diff
|
|
96
|
+
+ import { createContext, useContext } from "react";
|
|
97
|
+
import { Store, useStore } from "@t8/react-store";
|
|
95
98
|
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
- let counterStore = new Store(0);
|
|
100
|
+
+ let AppContext = createContext(new Store(0));
|
|
98
101
|
|
|
99
|
-
|
|
100
|
-
let
|
|
101
|
-
|
|
102
|
-
<PlusButton/>{" "}<Display/>
|
|
103
|
-
</AppContext.Provider>
|
|
104
|
-
);
|
|
105
|
-
```
|
|
102
|
+
let Counter = () => {
|
|
103
|
+
- let [counter, setCounter] = useStore(counterStore);
|
|
104
|
+
+ let [counter, setCounter] = useStore(useContext(AppContext));
|
|
106
105
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
let [counter, setCounter] = useStore(useContext(AppContext));
|
|
106
|
+
// Rendering
|
|
107
|
+
};
|
|
110
108
|
|
|
111
|
-
|
|
112
|
-
|
|
109
|
+
let App = () => (
|
|
110
|
+
- <>
|
|
111
|
+
+ <AppContext.Provider value={new Store(42)}>
|
|
112
|
+
<PlusButton/>{" "}<Display/>
|
|
113
|
+
+ </AppContext.Provider>
|
|
114
|
+
- </>
|
|
115
|
+
);
|
|
113
116
|
```
|
|
114
117
|
|
|
115
118
|
[Live counter demo with Context](https://codesandbox.io/p/sandbox/rtng37?file=%2Fsrc%2FPlusButton.jsx)
|
|
116
119
|
|
|
117
120
|
🔹 In a multi-store setup, stores can be located in a single Context or split across multiple Contexts, just like any application data.
|
|
118
121
|
|
|
119
|
-
```
|
|
122
|
+
```jsx
|
|
123
|
+
import { createContext, useContext } from "react";
|
|
124
|
+
import { Store, useStore } from "@t8/react-store";
|
|
125
|
+
|
|
120
126
|
// Multiple stores in a single Context
|
|
121
127
|
let AppContext = createContext({
|
|
122
128
|
users: new Store(/* ... */),
|
|
123
129
|
items: new Store(/* ... */),
|
|
124
130
|
});
|
|
125
|
-
```
|
|
126
131
|
|
|
127
|
-
```jsx
|
|
128
132
|
let ItemCard = ({ id }) => {
|
|
129
133
|
let [items, setItems] = useStore(useContext(AppContext).items);
|
|
130
134
|
|