Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine getServerState() & getServerContext() docs #67499

Merged
merged 5 commits into from
Dec 4, 2024
+10 −10
Merged

Refine getServerState() & getServerContext() docs #67499

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0bda29
`getServerState()` & `getServerContext()` docs: Add note about reacti…
michalczaplinski Dec 2, 2024
3033346
Fix the code snippets
michalczaplinski Dec 2, 2024
d4f57f4
Add note about local context
michalczaplinski Dec 2, 2024
377d59c
Fix param order and function name
michalczaplinski Dec 2, 2024
c78601f
Remove the namespace and use the correct functions
michalczaplinski Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions ...-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,15 +745,15 @@ When using region-based navigation, it's crucial to ensure that your interactive

`getServerState()` allows you to subscribe to changes in the **global state** that occur during client-side navigation. This function is analogous to `getServerContext()`, but it works with the global state instead of the local context.

The `getServerState()` function returns a read-only reactive object. This means that any [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) you have defined that watch the returned object will only trigger when the value returned by the function changes. If the value remains the same, the callback will not re-trigger.

Let's consider a quiz that has multiple questions. Each question is a separate page. When the user navigates to a new question, the server provides the new question and the time left to answer all the questions.

```php
<?php
wp_interactivity_state( 'myPlugin', array(
<div <?php echo wp_interactivity_state( 'myPlugin', array(
michalczaplinski marked this conversation as resolved.
Show resolved Hide resolved
'question' => get_question_for_page( get_the_ID() ),
'timeLeft' => 5 * 60, // Time to answer all the questions.
) );
?>
) ); ?>>
```

```javascript
Expand Down Expand Up @@ -789,14 +789,14 @@ store( 'myPlugin', {

`getServerContext()` allows you to subscribe to changes in the **local context** that occur during client-side navigation. This function is analogous to `getServerState()`, but it works with the local context instead of the global state.

The `getServerContext()` function returns a read-only reactive object. This means that any [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) you have defined that watch the returned object will only trigger when the value returned by the function changes. If the value remains the same, the callback will not re-trigger.

Consider a quiz that has multiple questions. Each question is a separate page. When the user navigates to a new question, the server provides the new question and the time left to answer all the questions.

```php
<?php
wp_interactivity_context( 'myPlugin', array(
<div <?php echo wp_interactivity_data_wp_context( 'myPlugin', array(
michalczaplinski marked this conversation as resolved.
Show resolved Hide resolved
'currentQuestion' => get_question_for_page( get_the_ID() ),
) );
?>
) ); ?>>
```

```javascript
Expand Down Expand Up @@ -830,12 +830,12 @@ store( 'myPlugin', {

### When to Use

Whenever you have interactive blocks that rely on global state that may change due to navigation events, ensuring consistency across different parts of your application.
Whenever you have interactive blocks that rely on global state or local context that may change due to navigation events, ensuring consistency across different parts of your application.

### Best Practices for using `getServerState()` and `getServerContext()`

- **Read-Only References:** Both `getServerState()` and `getServerContext()` return read-only objects. You can use those objects to update the global state or local context.
- **Callback Integration:** Incorporate these functions within your store [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) to react to state and context changes.
- **Callback Integration:** Incorporate these functions within your store [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) to react to state and context changes. Both `getServerState()` and `getServerContext()` return reactive objects. This means that their watch callbacks will only trigger when the value of a property changes. If the value remains the same, the callback will not re-trigger.

## Conclusion

Expand Down
Loading