Skip to content

Commit 45bbcfa

Browse files
committed
docs: improve updating state docs and remove redundant
1 parent 5ddcba2 commit 45bbcfa

File tree

3 files changed

+22
-32
lines changed

3 files changed

+22
-32
lines changed

apps/docs/pages/service/overview.mdx

Lines changed: 0 additions & 3 deletions
This file was deleted.

apps/docs/pages/service/trpc-usage-example.mdx

Lines changed: 0 additions & 5 deletions
This file was deleted.

apps/docs/pages/store/updating-state.mdx

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -112,26 +112,35 @@ userStore.address.assign({
112112

113113
Note: the `assign` method only exists on object data type
114114

115-
## Using set with Callbacks
115+
## Set with callback functions
116116

117-
When passing a callback to to the `set` function, the type of callback you need to pass depends on the state datatype.
117+
The `set` function can accept a value or a callback function
118118

119-
The types fully reflect which type of callback is required and therefore your IDE guide you.
119+
Set value example: `counterStore.set(5)`
120+
Set callback function example: `counterStore.set(()=>{...})`
120121

121-
### using `set(draft=>{})` with objects/arrays
122+
### Datatype differences summary
123+
124+
The type of callback function changes depending on the state datatype.
125+
126+
**Objects/Arrays**: directly modify the draft, don't return anything
127+
**Primitives**: get previous value, return new value
128+
129+
(The types fully reflect which type of callback is required and therefore your IDE will guide you.)
130+
131+
### Object / Array set callback details
122132

123133
Calling `.set` on an object/array uses immer under the hook, allowing you to mutate a draft copy of the state while maininaining immutability.
124134

125135
```tsx
126136
const userStore = store({ name: 'John', age: 20 });
127137

128-
// settings objects uses immer
138+
// draft object uses immer
129139
userStore.set((draft) => {
130140
draft.name = 'Jane';
131141
draft.age = 30;
132142
});
133143

134-
//
135144
const todosStore = store([
136145
{ id: 1, text: 'write docs' },
137146
{ id: 2, text: 'sleep' },
@@ -141,35 +150,24 @@ todosStore.set((draft) => {
141150
draft.push('another task');
142151
});
143152

144-
todosStore.set(draft=>{
145-
cosnt firstTodo = todosStore[0];
146-
firstTodo.text = "new text"
147-
})
153+
todosStore.set((draft) => {
154+
const firstTodo = draft[0];
155+
firstTodo.text = 'new text';
156+
});
148157
```
149158

150-
### Using `set(preValue=>...) with primatives
159+
### Primitives set callback details
151160

152161
Calling `set` on other data types behaves slightly differently.
162+
153163
You are given the previous value of the property and you must return the new value from the callback.
154164

155165
```tsx
156166
userStore.age.set((prevAge) => prevAge + 1);
157167
```
158168

159-
### Key differences between using set callback
160-
161-
- objects/arrays:
162-
163-
- you can directly modify the draft and you dont need to return anything
164-
165-
- primative values:
166-
167-
- gets the previous value of the property, you must return the new value from the callback
168-
169169
## Additional notes:
170170

171-
- calling `.set(value)` on arrays/object behaves the same as other values. The difference only arises when passing a callback to the `set` function.
171+
- Non-draftable values (e.g., MediaRecorder or window) will be considered as primitive values
172172

173173
- Since `@davstack/store 1.3.0` root level array stores are fully supported
174-
175-
- You no longer need to consider the limitations of immer as non-draftable values eg MediaRecorder or window will default to regular zustand setters.

0 commit comments

Comments
 (0)