How to implement stateful, reusable components?

[thevicchij]

Hello,

I'm trying to implement a generic modal component that can be specialized for different use cases. The modal component knows how to show/hide, has a close button and can display error messages. Individual components can contain forms, ask to confirm actions etc.

I was thinking to define a @modal wrapper to decorate individual components and a ModalState "superclass", like:

class ModalState(rx.State):
    is_visible: bool = False

    def _show(self):
        if self.is_visible:
            return
        self.is_visible = True
        self._on_show()

    def _hide(self):
        if not self.is_visible:
            return
        self.is_visible = False
        chained_event = self._on_hide()
        return chained_event

    def _on_show(self):
        pass

    def _on_hide(self):
        pass

def modal(header: str, state: type(ModalState)):
    def decorator(rx_component_generator):
        def wrapper():
            return rx.box(
                rx.modal(
                    rx.modal_overlay(
                        rx.modal_content(
                            rx.modal_header(header),
                            rx.modal_body(
                                rx_component_generator()
                            ),
                            rx.modal_footer(
                                rx.button(
                                    "Close",
                                    on_click=state.hide
                                )
                            ),
                        )
                    ),
                    is_open=state.is_visible,
                ),
            )
        return wrapper
    return decorator


class CreateAllocationState(modal.ModalState):
    ...

@modal.modal(
        header="Create a new user",
        state=CreateUserState)
def create_user_modal() -> rx.Component:
    return rx.form(...)

CreateUserState would inherit from ModalState, which holds state and accessors (e.g. is_visible) owned by the modal, and add its own logic.

The problem I'm facing is that -in my understanding- the same ModalState is shared across all its children, so CreateUserState(ModalState) and DeleteUserState(ModalState) share the same is_visible value, which is obviously not desired.

Is such use case supported? What is the recommended way to implement components that can reuse front-end as well as state logic?

Thank you!

[masenf]

This is a possible use case, but reflex currently does not support it very well.

A potential option is to have is_visible as a dict mapping some id to the bool value. Then each modal created by the decorator can generate an id and use it to index into the dict (and event handlers) to control the state for that particular modal.

[TimChild]

#1877 Demonstrates this is possible (I see you linked it later @masenf )

Here is my slightly extended version where I move most of the logic to a mixin that allows setting up stateful and re-usable components like this:

stateful_component_example.mp4

Note that the components can also be created with unique ids such that values in them can be accessed elsewhere (or for event triggerring etc).

The code excluding the mixin (i.e. demonstrating usage) looks like this:

class ExampleComponent(StatefulComponentBase):
    value: int = 0

    def increment(self):
        self.value += 1

    def decrement(self):
        self.value -= 1

    @classmethod
    def component(cls) -> rx.Component:
        return rx.card(
            rx.heading("Example Component", size="2"),
            rx.text(f'Selected value is: {cls.value}'),
            rx.hstack(
                rx.button('Increment', on_click=cls.increment, color_scheme='green'),
                rx.button('Decrement', on_click=cls.decrement, color_scheme='red'),
            ),
        )


example_component = ExampleComponent.create


@rx.page(route="/component_and_state_testing", title="Stateful Unique Components")
def index() -> rx.Component:
    return rx.container(
        rx.spacer(height="5em"),
        rx.vstack(
            rx.heading("Stateful Unique Components", size="5"),
            rx.divider(),
            rx.hstack(
                example_component(uid='1'),
                example_component(uid="2"),
                example_component(uid="3"),
            ),
            rx.divider(),
            rx.heading(
                "Accessing values from the components with provided uid", size="3"),
            rx.hstack(
                rx.card(rx.text(f"{ExampleComponent.get_class('1').value}", weight="bold")),
                rx.card(rx.text(f"{ExampleComponent.get_class('2').value}", weight="bold")),
                rx.card(rx.text(f"{ExampleComponent.get_class('3').value}", weight="bold")),
            ),
            rx.divider(),
            rx.heading('Can also just create standalone components', size="3"),
            example_component(),
            example_component(),
        ),
    )

And the mixin class that enables the functionality:

import uuid
from typing import ClassVar, Self

import reflex as rx


class StatefulComponentBase(rx.Base):
    _unique_int: ClassVar[int] = 0  # Just so class names don't end up super long
    _instance_mapping: ClassVar[dict[str, Self]] = {}

    @classmethod
    def get_class(cls, uid: str) -> Self:
        """Use this to access values from otherwise standalone component"""
        uid = str(uid)
        if uid in cls._instance_mapping:
            return cls._instance_mapping[uid]

        # Create a new type with a unique name inhering from this cls and rx.State as bases
        cls._unique_int += 1
        unique_cls: type = type(f"{cls.__name__}_{cls._unique_int}", (cls, rx.State), {})
        cls._instance_mapping[uid] = unique_cls
        return unique_cls

    @classmethod
    def create(cls, *args, uid: str = None, **kwargs) -> rx.Component:
        """Creates component but with a unique class name each time to prevent state conflicts"""
        uid = str(uid) if uid else str(uuid.uuid4())
        klass = cls.get_class(uid)
        return klass.component(*args, **kwargs)

    @classmethod
    def component(cls, *args, **kwargs) -> rx.Component:
        """This method must be implemented in the subclass to return a component (taking any args and kwargs)"""
        raise NotImplementedError("Must implement component method in subclass")

[picklelo]

@TimChild We have this as a first-class citizen now with rx.ComponentState: https://reflex.dev/docs/substates/component-state/

[TimChild]

@picklelo Damn! You're always one step ahead of me! I guess that's a good thing!

[thevicchij]

Thank you for the great suggestion. I was using mixins as a workaround, to at least reuse behavior, but I'll definitely try this approach.

Let me leave one more bit of info if someone else is attempting to do the same. (Presumably) due to the way handlers are referenced by rx.Components (by class.function), things don't work as expected with inheritance.
For example, in this code:

class ModalState(rx.State):
    def show(self):
        ...  # generic modal logic here
        self._on_show()
        
    def _on_show(self):  #hook for custom logic in the subclasses
        pass

class CreateUserState(ModalState):
    def _on_show(self):
        print("hook for custom logic")

def myComponent() -> rx.Component:
    ...
   rx.button("click",
             on_click=CreateUserState.show)

I would expect that clicking on the click button prints "hook for custom logic". However, this does not happen. CreateUserState.show is the same object as ModalState.show, and reflex will generate a ModalState instance to handle the on_click event. As a consequence, the hook in the subclass is not invoked.

As a workaround, I explicitly implement show in each subclass, and call a super()._show from within it.

[masenf]

I also meant to link this earlier #1877