state-jet 2.0.21 → 2.0.23
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 +21 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ For more details, see [here](https://statejet.netlify.app).
|
|
|
17
17
|
- [Binding Global State to a Component](#binding-global-state-to-a-component)
|
|
18
18
|
- [Slices](#slices)
|
|
19
19
|
- [Create Slice](#create-slice)
|
|
20
|
+
- [Multi States in Single Slice](#multi-states-in-single-slice)
|
|
20
21
|
- [Store](#store)
|
|
21
22
|
- [Create Store](#create-store)
|
|
22
23
|
- [Binding Store to a Component](#binding-store-to-a-component)
|
|
@@ -123,10 +124,27 @@ Slices in state-jet represent logical groupings of state that help organize appl
|
|
|
123
124
|
|
|
124
125
|
import { useSlice } from "state-jet";
|
|
125
126
|
|
|
127
|
+
const cartSlice = useSlice("cart");
|
|
128
|
+
|
|
129
|
+
export const useCartSlice = () => cartSlice("cartState", {});
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Multi States in Single Slice
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
// file: src/store/slices.ts
|
|
136
|
+
|
|
137
|
+
import { useSlice } from "state-jet";
|
|
138
|
+
|
|
126
139
|
const productSlice = useSlice("products");
|
|
127
140
|
const cartSlice = useSlice("cart");
|
|
128
141
|
|
|
129
|
-
|
|
142
|
+
// Define multiple state values under one slice
|
|
143
|
+
export const useProductSlice = () => ({
|
|
144
|
+
productState: productSlice("productState", {}),
|
|
145
|
+
productFilter: productSlice("productFilter", { search: "", category: "all" }),
|
|
146
|
+
productSort: productSlice("productSort", { order: "asc" }),
|
|
147
|
+
});
|
|
130
148
|
export const useCartSlice = () => cartSlice("cartState", {});
|
|
131
149
|
```
|
|
132
150
|
|
|
@@ -173,9 +191,9 @@ type CartType = {
|
|
|
173
191
|
|
|
174
192
|
export const ProductList = () => {
|
|
175
193
|
const store = useEcommerceStore();
|
|
176
|
-
const
|
|
194
|
+
const { productState }: any = store.products;
|
|
177
195
|
const cart: any = store.cart;
|
|
178
|
-
const productSliceData: any =
|
|
196
|
+
const productSliceData: any = productState.useState();
|
|
179
197
|
const cartSliceData: any = cart.useState();
|
|
180
198
|
const productItems: Array<ProductType> = productSliceData?.items || [];
|
|
181
199
|
const cartItems: Array<CartType> = cartSliceData?.items || [];
|