[Question] How to propagate events or state between user controls

[Dionkal]

Question

Suppose that you have three user controls:

• Parent
• ChildA
• ChildB

and basically the hierarchy is that the parent holds both ChildA and ChildB.

Child A has a button that will update it's state when clicked, similarly ChildB has a text that will display the current state as seen in the code example. The state is basically instantiated in the Parent component and passed down to children. Can childA modify change and affect the state in either the Parent or ChildB components?

Is there a way to achieve this using flet? So far I've found only PubSub and Client/Session storage but I don't think that will suit my purpose because I am dynamically generating the components based on user input.

Code sample

class ChildA(ft.UserControl):

    def __init__(self, state):
        super().__init__()
        self.state = state

    def button_clicked(self, e):
        self.state = 'button clicked'

    def build(self):
        return ft.TextButton(text="Click me", on_click=self.button_clicked)
    

class ChildB(ft.UserControl):
    def __init__(self, state):
        super().__init__()
        self.state = state


    def build(self):
        return ft.Text(self.state)


class Parent(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.state = 'button not clicked'



    def build(self):
        return ft.Column(
            controls =[
                ChildA(self.state),
                ChildB(self.state)
            ]
        )

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Create some State class, keep its instance inside Parent control, pass the instance of State class to descendants, have "callback" variables if you need to "call" the parent - nothing special :) You have a correct thinking - from "childB" you notify parent and parent updates itself and "childB" - state changes should be propagated from top to bottom.

[Dionkal]

Thanks for your response.

I now get why you told me to use a class to hold the state inside the Parent class instead of using a simple value. When I pass the instance to the child components it is being passed by reference. I've added the callbacks in order to print the state instance in each class to see if the change is propagated and it is!

class State:
    def __init__(self, val):
        self.value = val

    

class ChildA(ft.UserControl):

    def __init__(self, state, clbk):
        super().__init__()
        self.state = state
        self.callback = clbk

    def button_clicked(self, e):
        self.state.value = 'button clicked'
        print(f'ChildA: {self.state.value}')
        self.callback()

    def build(self):
        return ft.TextButton(text="Click me", on_click=self.button_clicked)
    

class ChildB(ft.UserControl):
    def __init__(self, state):
        super().__init__()
        self.state = state

    def update_state(self):
        print(f'ChildB: {self.state.value}')

    def build(self):
        return ft.Text(self.state.value)


class Parent(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.state = State('Button not clicked')
        self.cha = ChildA(self.state, self.update_parent_state_callback)
        self.chb = ChildB(self.state)

    def update_parent_state_callback(self):
        print(f'Parent: {self.state.value}')
        self.chb.update_state()

    def build(self):
        return ft.Column(
            controls =[self.cha, self.chb]
        )

When I click the button I get the following output:

ChildA: button clicked
Parent: button clicked
ChildB: button clicked

So it seems to me that I don't have to use callbacks to propagate state.

However, the Text control in "ChildB" is not updated.
If I add a Ref to the Text control and manually update the value when the "childB" update_state method is being called I can see that the Text value changes.

class State:
    def __init__(self, val):
        self.value = val

    

class ChildA(ft.UserControl):

    def __init__(self, state, clbk):
        super().__init__()
        self.state = state
        self.callback = clbk

    def button_clicked(self, e):
        self.state.value = 'button clicked'
        print(f'ChildA: {self.state.value}')
        self.callback()

    def build(self):
        return ft.TextButton(text="Click me", on_click=self.button_clicked)
    

class ChildB(ft.UserControl):
    def __init__(self, state):
        super().__init__()
        self.state = state
        self.text = ft.Ref[ft.Text()]

    def update_state(self):
        print(f'ChildB: {self.state.value}')
        self.text.current.value = self.state.value
        self.update()

    def build(self):
        return ft.Text(ref=self.text, value=self.state.value)


class Parent(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.state = State('Button not clicked')
        self.cha = ChildA(self.state, self.update_parent_state_callback)
        self.chb = ChildB(self.state)

    def update_parent_state_callback(self):
        print(f'Parent: {self.state.value}')
        self.chb.update_state()

    def build(self):
        return ft.Column(
            controls =[self.cha, self.chb]
        )

So the only problem I have with that is that I want to know when the "childB" state changes without having to pass callbacks through all the objects, is this even possible?

It's easy to do it in this example with the 2 callbacks but it doesn't scale well. Having to update components that are 4-5 levels deep and having to traverse a huge hierarchy tree of components and pass to each component a callback for each event seems like bad practice.

[FeodorFitsner]

If you want to scale then yes, something like pub/sub (not exactly the one Flet offers) could help. You can do your own - it could be just a dictionary shared along with a page. There are also observable/observer and redux-like libraries for Python - I haven't tried them yet, but wish I have some time to make a great example. You can share your experience though :)

[Dionkal]

I've decided to go with your original idea, I created a class to hold the state and a callback to notify the parent when a child event triggered. Seems that currently that's the best solution that comes to mind, however it created huge files which I don't really like.

I think one possible feature is to register custom events to monitor state changes inside a UserControl, something like the useEffect hook in React, it would simplify the code needed and would clean up the custom components from boilerplate code.