state-jet 2.0.20 → 2.0.22
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 +27 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,6 +11,7 @@ For more details, see [here](https://statejet.netlify.app).
|
|
|
11
11
|
- [Why state-jet](#why-state-jet)
|
|
12
12
|
- [Documentation](#documentation)
|
|
13
13
|
- [Installation](#installation)
|
|
14
|
+
- [Wiki](#wiki)
|
|
14
15
|
- [GlobalState](#globalstate)
|
|
15
16
|
- [Create GlobalState](#create-globalstate)
|
|
16
17
|
- [Binding Global State to a Component](#binding-global-state-to-a-component)
|
|
@@ -38,10 +39,10 @@ For more details, see [here](https://statejet.netlify.app).
|
|
|
38
39
|
|
|
39
40
|
## Why state-jet
|
|
40
41
|
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
42
|
+
- **No Context, No Providers** – Works outside React, reducing unnecessary re-renders.
|
|
43
|
+
- **Automatic Re-Renders** – Only components using specific state values update.
|
|
44
|
+
- **Super Lightweight** – Ultra small!
|
|
45
|
+
- **SSR & Next.js Support** – Works on both client and server.
|
|
45
46
|
|
|
46
47
|
## Documentation
|
|
47
48
|
|
|
@@ -51,8 +52,6 @@ Tutorials: https://statejet.netlify.app/docs/tutorial/intro/
|
|
|
51
52
|
|
|
52
53
|
API Reference: https://statejet.netlify.app/docs/api-reference/global-state/
|
|
53
54
|
|
|
54
|
-
Wiki: https://deepwiki.com/venkateshsundaram/state-jet
|
|
55
|
-
|
|
56
55
|
## Installation
|
|
57
56
|
|
|
58
57
|
The Statejet package lives in npm. Please see the [installation guide](https://statejet.netlify.app/docs/getting-started/installation-and-setup/).
|
|
@@ -75,6 +74,10 @@ Or if you're using `cdn`:
|
|
|
75
74
|
<script src="https://cdn.jsdelivr.net/npm/state-jet@latest/dist/index.cjs"></script>
|
|
76
75
|
```
|
|
77
76
|
|
|
77
|
+
## Wiki
|
|
78
|
+
|
|
79
|
+
[](https://deepwiki.com/venkateshsundaram/state-jet)
|
|
80
|
+
|
|
78
81
|
## GlobalState
|
|
79
82
|
|
|
80
83
|
The `useStateGlobal` hook is the simplest entry point to State-Jet—-ideal for simple applications with minimal state management needs. It allows you to create stateful values that can be accessed and updated from any component in your application, regardless of their location in the component tree.
|
|
@@ -111,7 +114,7 @@ export default function Counter() {
|
|
|
111
114
|
|
|
112
115
|
## Slices
|
|
113
116
|
|
|
114
|
-
Slices in state-jet represent logical groupings of state that help organize application data into manageable pieces.
|
|
117
|
+
Slices in state-jet represent logical groupings of state that help organize application data into manageable pieces.
|
|
115
118
|
|
|
116
119
|
### Create Slice
|
|
117
120
|
|
|
@@ -127,6 +130,21 @@ export const useProductSlice = () => productSlice("productState", {});
|
|
|
127
130
|
export const useCartSlice = () => cartSlice("cartState", {});
|
|
128
131
|
```
|
|
129
132
|
|
|
133
|
+
### Multi States in Single Slice
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
// file: src/store/slices.ts
|
|
137
|
+
|
|
138
|
+
import { useSlice } from "state-jet";
|
|
139
|
+
|
|
140
|
+
// Define multiple state values under one slice
|
|
141
|
+
export const useProductSlice = () => ({
|
|
142
|
+
productState: productSlice("productState", {}),
|
|
143
|
+
productFilter: productSlice("productFilter", { search: "", category: "all" }),
|
|
144
|
+
productSort: productSlice("productSort", { order: "asc" }),
|
|
145
|
+
});
|
|
146
|
+
```
|
|
147
|
+
|
|
130
148
|
## Store
|
|
131
149
|
|
|
132
150
|
The `useStore` hook serves as a mechanism to group related slices of state into a cohesive store, enabling modular and organized state management in React applications which are better suited for larger applications with more complex and structured state requirements.
|
|
@@ -170,9 +188,9 @@ type CartType = {
|
|
|
170
188
|
|
|
171
189
|
export const ProductList = () => {
|
|
172
190
|
const store = useEcommerceStore();
|
|
173
|
-
const
|
|
191
|
+
const { productState }: any = store.products;
|
|
174
192
|
const cart: any = store.cart;
|
|
175
|
-
const productSliceData: any =
|
|
193
|
+
const productSliceData: any = productState.useState();
|
|
176
194
|
const cartSliceData: any = cart.useState();
|
|
177
195
|
const productItems: Array<ProductType> = productSliceData?.items || [];
|
|
178
196
|
const cartItems: Array<CartType> = cartSliceData?.items || [];
|