@@ -14,6 +14,8 @@ yarn add xstate
14
14
npm install xstate
15
15
```
16
16
17
+ [ Read more on installing XState] ( installation.mdx ) .
18
+
17
19
## Creating a state machine
18
20
19
21
``` ts
@@ -56,6 +58,8 @@ actor.send({ type: 'toggle' });
56
58
// logs 'inactive' with context { count: 2 }
57
59
```
58
60
61
+ [ Read more about the actor model] ( actor-model.mdx ) .
62
+
59
63
## Creating promise logic
60
64
61
65
``` ts
@@ -74,12 +78,14 @@ actor.subscribe((snapshot) => {
74
78
});
75
79
76
80
actor .start ();
77
- // logs something like : {
78
- // message: ' https://images.dog.ceo/breeds/terrier-norwich/n02094258_1003 .jpg',
79
- // status: ' success'
81
+ // logs: {
82
+ // message: " https://images.dog.ceo/breeds/kuvasz/n02104029_110 .jpg",
83
+ // status: " success"
80
84
// }
81
85
```
82
86
87
+ [ Read more about promise actor logic] ( actors.mdx#promise-actor-logic ) .
88
+
83
89
## Creating transition logic
84
90
85
91
A transition function is just like a reducer.
@@ -114,6 +120,8 @@ actor.send({ type: 'inc' });
114
120
// logs { count: 2 }
115
121
```
116
122
123
+ [ Read more about transition actors] ( actors.mdx#transition-actors ) .
124
+
117
125
## Creating observable logic
118
126
119
127
``` ts
@@ -133,6 +141,8 @@ actor.start();
133
141
// every second
134
142
```
135
143
144
+ [ Read more about observable actors] ( actors.mdx#observable-actors ) .
145
+
136
146
## Creating callback logic
137
147
138
148
``` ts
@@ -163,6 +173,8 @@ actor.send({ type: 'cancel' });
163
173
// logs 'canceled'
164
174
```
165
175
176
+ [ Read more about callback actors] ( actors.mdx#callback-actors ) .
177
+
166
178
## Parent states
167
179
168
180
``` ts
@@ -193,6 +205,8 @@ actor.start();
193
205
// logs { active: 'one' }
194
206
```
195
207
208
+ [ Read more about parent states] ( parent-states.mdx ) .
209
+
196
210
## Actions
197
211
198
212
``` ts
@@ -263,6 +277,8 @@ actor.send({ type: 'toggle' });
263
277
// logs 'Activating'
264
278
```
265
279
280
+ [ Read more about actions] ( actions.mdx ) .
281
+
266
282
## Guards
267
283
268
284
``` ts
@@ -314,6 +330,8 @@ actor.start();
314
330
// logs 'Cannot be toggled'
315
331
```
316
332
333
+ [ Read more about guards] ( guards.mdx ) .
334
+
317
335
## Invoking actors
318
336
319
337
``` ts
@@ -367,6 +385,8 @@ actor.start();
367
385
// { id: 1, name: 'Leanne Graham', ... }
368
386
```
369
387
388
+ [ Read more about invoking actors] ( invoke.mdx ) .
389
+
370
390
## Spawning actors
371
391
372
392
``` ts
@@ -405,6 +425,8 @@ actor.send({ type: 'loadUser' });
405
425
// { id: 1, name: 'Leanne Graham', ... }
406
426
```
407
427
428
+ [ Read more about spawning actors] ( spawn.mdx ) .
429
+
408
430
## Input and output
409
431
410
432
``` ts
@@ -433,6 +455,8 @@ actor.start();
433
455
// logs 'Hello, David'
434
456
```
435
457
458
+ [ Read more about input] ( input.mdx ) .
459
+
436
460
## Invoking actors with input
437
461
438
462
``` ts
@@ -474,3 +498,5 @@ actor.start();
474
498
// eventually logs:
475
499
// { id: 3, name: 'Clementine Bauch', ... }
476
500
```
501
+
502
+ [ Read more about invoking actors with input] ( input.mdx#invoking-actors-with-input ) .
0 commit comments