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: apps/docs/pages/store/updating-state.mdx
+40-34Lines changed: 40 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -110,60 +110,66 @@ userStore.address.assign({
110
110
});
111
111
```
112
112
113
+
Note: the`assign` method only exists on object data type
114
+
113
115
##Using set with Callbacks
114
116
115
-
###store.set
117
+
When passing a callback to to the`set` function, the type of callback you need to pass depends on the state datatype.
118
+
119
+
The types fully reflect which type of callback is required and therefore your IDE guide you.
120
+
121
+
###using`set(draft=>{})` with objects/arrays
116
122
117
-
Calling`.set` onthe store itself allowsyou to mutate a draft copy of the stateusing a callback function, and all changes will be applied immutably with immer.
123
+
Calling`.set` onan object/array uses immer under the hook, allowingyou to mutate a draft copy of the statewhile maininaining immutability.
118
124
119
125
```tsx
126
+
const userStore=store({ name:'John', age:20 });
127
+
128
+
// settings objects uses immer
120
129
userStore.set((draft)=> {
121
130
draft.name='Jane';
122
131
draft.age=30;
123
132
});
133
+
134
+
//
135
+
const todosStore=store([
136
+
{ id:1, text:'write docs' },
137
+
{ id:2, text:'sleep' },
138
+
]);
139
+
140
+
todosStore.set((draft)=> {
141
+
draft.push('another task');
142
+
});
143
+
144
+
todosStore.set(draft=>{
145
+
cosntfirstTodo=todosStore[0];
146
+
firstTodo.text="new text"
147
+
})
124
148
```
125
149
126
-
###store.property.set
150
+
###Using `set(preValue=>...) with primatives
127
151
128
-
Calling`set` ona propertybehaves slightly differently than calling`set` on the store itself.
152
+
Calling`set` onother data typesbehaves slightly differently.
129
153
You are given the previous value of the property and you must return the new value from the callback.
-`store.set` gets the entire state as a draft, you can directly modify the draft and you dont need to return anything
138
-
-`store.property.set` gets the previous value of the property, you must return the new value from the callback
161
+
- objects/arrays:
139
162
140
-
###Common pitfalls
163
+
- you can directly modify the draft and you dont need to return anything
141
164
142
-
Since`set` uses immer under the hood, it is a good idea to familiarize yourself with[immerjs.github.io/immer/pitfalls](https://immerjs.github.io/immer/pitfalls) to avoid common pitfalls when using immer
165
+
- primative values:
143
166
144
-
For example, when using array state make to use`store({items: []})` instead of`store([])` for arrays.
167
+
- gets the previous value of the property, you must return the new value from the callback