State Mixins

State mixins allow you to define shared functionality that can be reused across multiple State classes. This is useful for creating reusable components, shared business logic, or common state patterns.

A state mixin is a State class marked with mixin=True that cannot be instantiated directly but can be inherited by other State classes. Mixins provide a way to share:

• Base variables
• Computed variables
• Event handlers
• Backend variables

To create a state mixin, inherit from rx.State and pass mixin=True:

In this example, MyState automatically inherits the count variable, count_display computed variable, and increment event handler from CounterMixin.

You can inherit from multiple mixins to combine different pieces of functionality:

Mixins can also include backend variables (prefixed with _) that are not sent to the client:

Backend variables are useful for storing sensitive data, database connections, or other server-side state that shouldn't be exposed to the client.

Computed variables in mixins work the same as in regular State classes:

Mixins can inherit from other mixins to create hierarchical functionality:

This pattern allows you to build complex functionality by composing simpler mixins.

State mixins are particularly useful for:

• Form Validation: Shared validation logic across forms
• UI State Management: Common modal, loading, or notification patterns
• Logging: Centralized logging and debugging
• API Integration: Shared HTTP client functionality
• Data Formatting: Consistent data presentation across components

By using state mixins, you can create modular, reusable state logic that keeps your application organized and reduces code duplication.