You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs/src/pages/tutorial/store/basic/index.mdx
+12-9Lines changed: 12 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,20 +3,23 @@ title: Storing State
3
3
layout: tutorial
4
4
---
5
5
6
-
Applications need to store state to be useful. (Otherwise, they are just static pages.)
6
+
Applications need to store state to be useful, otherwise they're just static pages.
7
7
8
-
Qwik needs to track the application state for two reasons:
9
-
1. Application state needs to be serialized on application pause (and deserialize on application resume.)
10
-
2. Qwik needs to create subscriptions on stores so that it can know which components need to be re-rendered (if Qwik would not track subscription information then it would have to re-render the whole application which would defeat the lazy-loading.)
8
+
Qwik tracks application state for two reasons:
11
9
12
-
The component on the right looks like it should work, but it does not because the `counter` is just a regular objects, which does not create subscriptions. As a result, Qwik does not know when `counter.count` changes and it does not know that it has to re-render the `<App>`.
10
+
1. To serialize data when the application pauses on the server, and deserialize as the application resumes on the client.
13
11
14
-
Wrap the `counter` in `useStore()` to enable dependency tracking and automatic re-rendering.
12
+
1. To create subscriptions on stores so that Qwik knows which components to re-render. If Qwik didn't track subscriptions, it would have to re-render the whole application - which would defeat the purpose of lazy-loading.
13
+
14
+
The component on the right doesn't work yet because `counter` is just a plain object with no subscriptions. As a result, Qwik doesn't know when `counter.count` changes, and therefore doesn't know to re-render the `<App>` component.
15
+
16
+
> **Your task:** Wrap `counter` in `useStore()` to enable dependency tracking and automatic re-rendering.
15
17
16
18
## Serialization
17
19
18
-
Open the HTML tab to see what information was serialized by the server. find `<script type="qwik/json">` for serialization information. While the exact serialization format is not important and subject to change notice two things:
20
+
Open the *HTML* tab to see what information is serialized by the server. Look in the `<script type="qwik/json">` block for serialization information and notice that:
21
+
19
22
1.`{count: 0}` is in the serialized state.
20
-
2. At the end of the serialized state are `subs` which contain `"count"`. These subscriptions tell Qwik which component needs to be re-rendered when the state changes.
23
+
1. At the end of the serialized state are `subs` which contain `"count"`. These subscriptions tell Qwik which component to re-render as the state changes.
21
24
22
-
Qwik state is in no way tied to the component that created it. The state can be passed to any component in the application and Qwik will correctly create subscriptions and correctly re-render only the affected components.
25
+
Qwik state is in no way tied to the component that created it. The state can be passed to any component in the application and Qwik creates the needed subscriptions and re-renders only the affected components.
0 commit comments