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: blog/2023-10-02-persisting-state/index.mdx
+13-14Lines changed: 13 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,14 +3,16 @@ title: 'Persisting and restoring state in XState'
3
3
description: Learn how to persist and restore your state machine state in XState
4
4
tags: []
5
5
authors: [david]
6
-
date: 2023-09-19
7
-
slug: 2023-09-19-persisting-state
8
-
image: /blog/2023-09-19-persisting-state.png
6
+
date: 2023-10-02
7
+
slug: 2023-10-02-persisting-state
8
+
image: /blog/2023-10-02-persisting-state.png
9
9
---
10
10
11
-
State machines have a useful feature: modeling state. But what happens when your user closes the browser and comes back later? Or when your server restarts? Or when your user logs out and logs back in? In this article, we'll learn how to persist and restore state in XState.
11
+
State machines are great for modeling state in applications. However, we often need to persist and restore state across sessions - for example, when a user closes and reopens their browser. In this article, we'll explore how to persist and restore state in XState so your frontend applications or backend workflows can pick up where they left off.
12
12
13
-
Note: this article applies to XState v5 beta.
13
+
:::info
14
+
The code in this article applies to XState v5 beta.
15
+
:::
14
16
15
17
## Quick reference
16
18
@@ -84,7 +86,7 @@ You may want to persist the state of this machine so that when the user comes ba
84
86
85
87
First, you should determine your [persistence strategy](#persistence-strategies). For this example, we'll use [the `localStorage` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
86
88
87
-
Actors created with `createActor` have a `.getPersistedState()` method that returns the state that should be persisted. This state is a plain object that can be serialized to JSON using `JSON.stringify(persistedState)`. Since the persisted state is a plain object, you can persist it to any storage that you want, as long as it can be restored as an object.
89
+
Actors created with `createActor` have a `.getPersistedState()` method that returns the state that can be persisted. This state is a plain object that can be serialized to JSON using `JSON.stringify(persistedState)`. Since the persisted state is a plain object, you can persist it to any storage that you want, as long as it can be restored as an object.
88
90
89
91
```ts
90
92
// Read the state to persist from the actor (sync)
@@ -126,14 +128,11 @@ For the server, you can:
126
128
- Use a cache (e.g., [Redis](https://redis.io/))
127
129
- Use cookies or session storage
128
130
129
-
## Persisting other kinds of actor logic
130
-
131
-
TODO: all kinds of actor logic can be persisted, not just machines
132
-
133
-
## Recursive persistence
131
+
## Examples
134
132
135
-
TODO: all invoked and spawned actors can be persisted, as long as they're named
133
+
There are examples of persisting state that can be found in the [XState git repository](https://github.com/statelyai/xstate/tree/next/examples):
136
134
137
-
## Examples
135
+
-[Persisting state to a writable `.json` file](https://github.com/statelyai/xstate/blob/next/examples/persisted-donut-maker)
136
+
-[Persisting state to MongoDB](https://github.com/statelyai/xstate/tree/next/examples/mongodb-persisted-state)
138
137
139
-
TODO: list example(s) here
138
+
Feel free to suggest other examples at [feedback.stately.ai](https://feedback.stately.ai/examples), or [contribute your own](https://github.com/statelyai/xstate/tree/next/examples)!
0 commit comments