Skip to content

Commit c85e900

Browse files
committed
Redo date
1 parent 18fd732 commit c85e900

File tree

1 file changed

+13
-14
lines changed

1 file changed

+13
-14
lines changed

blog/2023-09-19-persisting-state/index.mdx renamed to blog/2023-10-02-persisting-state/index.mdx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ title: 'Persisting and restoring state in XState'
33
description: Learn how to persist and restore your state machine state in XState
44
tags: []
55
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
99
---
1010

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.
1212

13-
Note: this article applies to XState v5 beta.
13+
:::info
14+
The code in this article applies to XState v5 beta.
15+
:::
1416

1517
## Quick reference
1618

@@ -84,7 +86,7 @@ You may want to persist the state of this machine so that when the user comes ba
8486

8587
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).
8688

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.
8890

8991
```ts
9092
// Read the state to persist from the actor (sync)
@@ -126,14 +128,11 @@ For the server, you can:
126128
- Use a cache (e.g., [Redis](https://redis.io/))
127129
- Use cookies or session storage
128130

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
134132

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):
136134

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)
138137

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

Comments
 (0)