@@ -112,26 +112,35 @@ userStore.address.assign({
112
112
113
113
Note: the ` assign ` method only exists on object data type
114
114
115
- ## Using set with Callbacks
115
+ ## Set with callback functions
116
116
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
118
118
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(()=>{...}) `
120
121
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
122
132
123
133
Calling ` .set ` on an object/array uses immer under the hook, allowing you to mutate a draft copy of the state while maininaining immutability.
124
134
125
135
``` tsx
126
136
const userStore = store ({ name: ' John' , age: 20 });
127
137
128
- // settings objects uses immer
138
+ // draft object uses immer
129
139
userStore .set ((draft ) => {
130
140
draft .name = ' Jane' ;
131
141
draft .age = 30 ;
132
142
});
133
143
134
- //
135
144
const todosStore = store ([
136
145
{ id: 1 , text: ' write docs' },
137
146
{ id: 2 , text: ' sleep' },
@@ -141,35 +150,24 @@ todosStore.set((draft) => {
141
150
draft .push (' another task' );
142
151
});
143
152
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
+ });
148
157
```
149
158
150
- ### Using ` set(preValue=>...) with primatives
159
+ ### Primitives set callback details
151
160
152
161
Calling ` set ` on other data types behaves slightly differently.
162
+
153
163
You are given the previous value of the property and you must return the new value from the callback.
154
164
155
165
``` tsx
156
166
userStore .age .set ((prevAge ) => prevAge + 1 );
157
167
```
158
168
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
-
169
169
## Additional notes:
170
170
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
172
172
173
173
- 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