Skip to content

Commit

Permalink
Remove references to typed function from docs
Browse files Browse the repository at this point in the history
  • Loading branch information
sirreal committed Sep 18, 2024
1 parent 340aa35 commit 1d4da07
Showing 1 changed file with 4 additions and 40 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -471,9 +471,7 @@ type Store = {
};
```

However, there are a couple of things to consider when using asynchronous actions.

1. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.
There's something to keep in mind when when using asynchronous actions. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.

```ts
const { state, actions } = store( 'myCounterPlugin', {
Expand Down Expand Up @@ -507,40 +505,6 @@ However, there are a couple of things to consider when using asynchronous action

That's it! Remember that the return type of a Generator is the second generic argument: `Generator< unknown, ReturnType, unknown >`.

2. When yielding inside a generator, TypeScript does not resolve the types of the promises directly because it doesn't know what the controller will return after processing the promise.

```ts
const getAsyncNumber = async () => {
return 1;
};
store( 'myCounterPlugin', {
actions: {
*getSomeNumber() {
const n = yield getAsyncNumber(); // TypeScript doesn't resolve this type.
},
},
} );
```

To fix this, you can combine the use of `yield*` with the `typed()` helper, which converts the promise type into an iterator that can be correctly inferred by TypeScript when used in conjunction with `yield*`.

_**Note**: The `typed` function will be included in WordPress 6.7._

```ts
import { typed } from '@wordpress/interactivity';
// ...
store( 'myCounterPlugin', {
actions: {
*getSomeNumber() {
const n = yield* typed( getAsyncNumber() ); // This is correctly typed now.
},
},
} );
```

## Typing stores that are divided into multiple parts

Sometimes, stores can be divided into different files. This can happen when different blocks share the same namespace, with each block loading the part of the store it needs.
Expand Down Expand Up @@ -757,15 +721,15 @@ store( 'myAddPostToTodoPlugin', {

Remember that you will need to declare the `my-todo-plugin-module` script module as a dependency.

If including the other store is optional and you don't want to load it from the beginning, instead of a static import, you can also use a dynamic import. Remember that in this case, you have to use the `typed` helper in conjunction with `yield*` to be able to utilize the types within the generator.
If the other store is optional and you don't want to load it eagerly, a dynamic import can be used instead of a static import.

```ts
import { store, typed } from '@wordpress/interactivity';
import { store } from '@wordpress/interactivity';

store( 'myAddPostToTodoPlugin', {
actions: {
*addPostToTodo() {
const todoPlugin = yield typed( import( 'my-todo-plugin-module' ) );
const todoPlugin = yield import( 'my-todo-plugin-module' );
const todo = `Read: ${ state.postTitle }`.trim();
if ( ! todoPlugin.state.todos.includes( todo ) ) {
todoPlugin.actions.addTodo( todo );
Expand Down

0 comments on commit 1d4da07

Please sign in to comment.