File tree 1 file changed +20
-2
lines changed
apps/website/docs/factories
1 file changed +20
-2
lines changed Original file line number Diff line number Diff line change @@ -98,11 +98,29 @@ const createCounter = createFactory(({ initialValue }) => {
98
98
### ` invoke `
99
99
100
100
Anywhere in your application you can invoke a factory by calling ` invoke ` with a factory and its arguments:
101
+ We do not call ` invoke ` in components; instead, we call it in ** ` .js ` ** or ** ` .ts ` ** files, as if we were writing regular Effector code.
101
102
102
- ``` ts
103
+ ``` js
103
104
import { invoke } from ' @withease/factories' ;
104
105
105
- const counter = invoke (createCounter , { initialValue: 2 });
106
+ const { $counter , increment , decrement } = invoke (createCounter, { initialValue: 2 });
107
+ ```
108
+
109
+ Now we can use ` $counter ` , ` increment ` , and ` decrement ` in our components
110
+ Here’s how you might use them in a React component:
111
+
112
+ ``` jsx
113
+ const CounterComponent = () => {
114
+ const counter = useStore ($counter);
115
+
116
+ return (
117
+ < div>
118
+ < p> Counter: {counter}< / p>
119
+ < button onClick= {() => increment ()}> Increment< / button>
120
+ < button onClick= {() => decrement ()}> Decrement< / button>
121
+ < / div>
122
+ );
123
+ };
106
124
```
107
125
108
126
::: warning
You can’t perform that action at this time.
0 commit comments