Skip to content

Commit 2d9911c

Browse files
committed
docs: Update debugging guide; move to getting-started
1 parent 09ad848 commit 2d9911c

File tree

7 files changed

+20
-83
lines changed

7 files changed

+20
-83
lines changed

docs/core/guides/debugging.md

Lines changed: 15 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -32,107 +32,43 @@ in dev mode. If you have custom managers, you'll need to ensure DevToolsManager
3232

3333
## Open dev tools
3434

35-
<span style={{float:'right',marginLeft:'10px'}}>
36-
![redux-devtools button](/img/redux-devtools.png)
35+
<span style={{float:'right',marginLeft:'10px',width:'190px'}}>
36+
![redux-devtools browser button](/img/devtools-browser-button.png)
3737
</span>
3838

3939
After installing and running your site, a new icon should appear in your location bar
4040

4141
Clicking that will open the inspector, which allows you to observe dispatched actions,
42-
their effect on the cache state as well as current cache state.
42+
their effect on the store's state as well as current store state.
4343

4444
![browser-devtools](/img/devtool-action.png 'Reactive Data Client devtools')
4545

4646
The [Controller](../api/Controller.md) dispatches actions, making that page useful for understanding
47-
what actions you see. Here we observe the most common actions of [fetch](../api/Controller.md#fetch)
48-
and [set](../api/Controller.md#setResponse).
47+
what actions you see. Here we observe common actions of [fetch](../api/Controller.md#fetch)
48+
and [setResponse](../api/Controller.md#setResponse).
4949

5050
:::note
5151

52-
By default the devtool integration will filter [fetch](../api/Controller.md#fetch) actions initiated
53-
by hooks to reduce spam. This can be changed with [skipLogging](../api/DevToolsManager.md#skiplogging) option.
52+
By default the devtool integration will filter duplicate [fetch](../api/Controller.md#fetch) actions.
53+
This can be changed with [skipLogging](../api/DevToolsManager.md#skiplogging) option.
5454

5555
:::
5656

5757
## State Inspection
5858

59-
If [schema](/rest/api/schema)s are used, API responses are split into two pieces - entities, and results. This
60-
is known as [normalization](../concepts/normalization.md), which ensures consistency
61-
and alows allows for automatic as well as novel performances optimizations, especially
62-
key if the data ever changes or is repeated.
63-
64-
<Tabs
65-
defaultValue="State"
66-
values={[
67-
{ label: 'State', value: 'State' },
68-
{ label: 'Response', value: 'Response' },
69-
{ label: 'Endpoint', value: 'Endpoint' },
70-
{ label: 'Entity', value: 'Entity' },
71-
{ label: 'React', value: 'React' },
72-
]}>
73-
<TabItem value="State">
74-
75-
![Entities cache](/img/entities.png 'Entities cache')
76-
77-
</TabItem>
78-
<TabItem value="Response">
79-
80-
```json
81-
[
82-
{ "id": 1, "title": "this is an entity" },
83-
{ "id": 2, "title": "this is the second entity" }
84-
]
85-
```
86-
87-
</TabItem>
88-
<TabItem value="Endpoint">
89-
90-
```typescript
91-
const getPresentations = new Endpoint(
92-
() => fetch(`/presentations`).then(res => res.json()),
93-
{ schema: new schema.Collection([Presentation]) },
94-
);
95-
```
96-
97-
</TabItem>
98-
<TabItem value="Entity">
99-
100-
```typescript
101-
class Presentation extends Entity {
102-
id = '';
103-
title = '';
104-
105-
pk() {
106-
return this.id;
107-
}
108-
static key = 'presentation';
109-
}
110-
```
111-
112-
</TabItem>
113-
<TabItem value="React">
114-
115-
```tsx
116-
export function PresentationsPage() {
117-
const presentation = useSuspense(getPresentations);
118-
return presentation.map(presentation => (
119-
<div key={presentation.pk()}>{presentation.title}</div>
120-
));
121-
}
122-
```
123-
124-
</TabItem>
125-
</Tabs>
126-
127-
Once [normalized](../concepts/normalization.md), these [entities](/rest/api/Entity) and results are merged with the larger cache. Click on the 'state'
128-
tab in devtools to see the entire state. This can be useful to determine exactly where data is. There is
129-
also a 'meta' section of the cache for information like when the request took place (useful for [TTL](../concepts/expiry-policy.md)).
59+
Whens [schema](/rest/api/schema)s are used, responses are [normalized](../concepts/normalization.md) into `entities`
60+
and `endpoints` tables. This enables automatic performance advantages over simpler key-value fetch caches; especially
61+
beneficial with dynamic (changing) data. This also eliminates data-inconsistency bugs.
13062

13163
![Dev tools state inspector](/img/devtool-state.png 'Reactive Data Client devtools state inspector')
13264

65+
Click on the **'state'**
66+
tab in devtools to see the store's entire state. This can be useful to determine exactly where data is. There is
67+
also a 'meta' section of the cache for information like when the request took place (useful for [TTL](../concepts/expiry-policy.md)).
68+
13369
## State Diff
13470

135-
For monitoring a particular fetch response, it might be more useful to see how the cache state updates.
71+
For monitoring a particular fetch response, it might be more useful to see how the store updates.
13672
Click on the 'Diff' tab to see what changed.
13773

13874
![Dev tools diff inspector](/img/devtool-diff.png 'Reactive Data Client devtools diff')

website/sidebars.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
{
2525
"type": "doc",
2626
"id": "getting-started/mutations"
27+
},
28+
{
29+
"type": "doc",
30+
"id": "guides/debugging"
2731
}
2832
]
2933
},
@@ -66,10 +70,7 @@
6670
"type": "category",
6771
"label": "Tooling",
6872
"items": [
69-
{
70-
"type": "doc",
71-
"id": "guides/debugging"
72-
},
73+
7374
{
7475
"type": "doc",
7576
"id": "guides/storybook"
71.4 KB
Loading
26.4 KB
Loading
6.39 KB
Loading
3.84 KB
Loading
7.92 KB
Loading

0 commit comments

Comments
 (0)