Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commitda1ca76

Browse files
committed
docs(store): add use with selector and computed with read/write examples
1 parent0779602 commitda1ca76

File tree

1 file changed

+36
-1
lines changed

1 file changed

+36
-1
lines changed

‎apps/docs/pages/store/reading-state.mdx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,18 @@ function Counter() {
4444
necessary, as it may lead to excessive re-renders and performance issues.
4545
</Callout>
4646

47+
###Using`use` with selector
48+
49+
You can pass a selector function as the first parameter of use to only subscribe to a subsect of that state.
50+
51+
This is useful for optimizing performance eg for long lists.
52+
53+
```tsx
54+
const activeTodo=todosStore.use((todos)=> {
55+
returntodos.find((todo)=>todo.id===activeTodoId);
56+
});
57+
```
58+
4759
###Nested Methods
4860

4961
You can use the`get` and`use` methods to access deeply nested state properties.
@@ -86,9 +98,32 @@ In this example, the `UserProfile` component only subscribes to changes in the `
8698

8799
##Computed Properties
88100

89-
Computed properties, defined using the`computed` method, can also be accessed using`get` and`use`. However, they cannot be directly modified using`set` or`assign`.
101+
Computed properties, defined using the`computed` method, can also be accessed using`get` and`use`.
90102

91103
```tsx
92104
const fullName=userStore.fullName.get();
93105
const fullName=userStore.fullName.use();
94106
```
107+
108+
###Example computed values with read/write
109+
110+
```tsx
111+
const countStore=store({ count:0 })
112+
.computed((store)=> ({
113+
doubled: {
114+
// optional input here
115+
read: ()=>store.count.use()*2,
116+
write: (value:number)=>store.count.set(value/2),
117+
},
118+
}))
119+
.actions((store)=> ({
120+
increment() {
121+
store.count.set(store.count.get()+1);
122+
},
123+
decrement() {
124+
store.count.set(store.count.get()-1);
125+
},
126+
}));
127+
```
128+
129+
Note: inputs are optional for both read/write and strongly typed.

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp