@@ -32,107 +32,43 @@ in dev mode. If you have custom managers, you'll need to ensure DevToolsManager
32
32
33
33
## Open dev tools
34
34
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 )
37
37
</span >
38
38
39
39
After installing and running your site, a new icon should appear in your location bar
40
40
41
41
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.
43
43
44
44
![ browser-devtools] ( /img/devtool-action.png ' Reactive Data Client devtools ')
45
45
46
46
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 ) .
49
49
50
50
::: note
51
51
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.
54
54
55
55
:::
56
56
57
57
## State Inspection
58
58
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.
130
62
131
63
![ Dev tools state inspector] ( /img/devtool-state.png ' Reactive Data Client devtools state inspector ')
132
64
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
+
133
69
## State Diff
134
70
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.
136
72
Click on the 'Diff' tab to see what changed.
137
73
138
74
![ Dev tools diff inspector] ( /img/devtool-diff.png ' Reactive Data Client devtools diff ')
0 commit comments