Client-side global asyncronous state

[ActuallyHappening]

Hey Dioxus community!
I'm porting over from leptos to build a client-side only web ui for a personal project. The primary reason for me switching was hot-reloading, waiting a minute for an update to my HTML that wasn't complex at all was slowing me down. Now my codebase gets to be a better-than-tauri desktop app as well!

I'm wanting to load data from a client-side database connection.

enum Creds {
Guest,
User { email: EmailAddress, password: String }
}
async fn connect_to_db(creds: Creds) -> Result<Conn, MyError> { ... }

I want this state to be rendered (reactively) in the UI (a small indicator that flashes red when failing/failed to connect). Also, I want to be able to mutate this global state when the user logs in, i.e. presses the login button or sign-up button, which requires calling connect_to_db again (I'm using surrealdb).
I'm not new to the frontend scene, but haven't worked very deeply with the React style of reactivity. I have a deep understanding of the reactivity in leptos which allowed me to implement this pretty easily:

pub enum DbState {
 StillLoading,
 Connected(Conn),
 Errored(MyError), 
}
impl DbState {
 pub fn from_context() -> RwSignal<DbState> {
  leptos::prelude::expect_context()
 }
 pub fn provide_context() {
  leptos::prelude::provide_context(RwSignal::new(DbState::StillLoading));
 }
}
pub fn LoadDb() -> impl IntoView {
 let resource = LocalResource::new(move || {
  // logic
  let new_db_conn = connect_to_db(/* logic /*).await;
  DbState::from_context().set(new_db_conn);
 });
 // stuff to render based on resource.value()
}

But, just based on these primitives I found on the dioxus docs, I'm not even sure this is possible without storing some sort of non-reactive Arc<DbState>! I found use_resource to get a syncronous wrapper, use_root_context to put the finished computation in, and use_context to extract the value. But reading the docs of use_context:

Does not regenerate the value if the value is changed at the parent.

So how can I get my UI components to use this global state while reactively re-rendering upon db connection changes?
On that note as well, in leptos I was able to transform an impl Stream<Item = NormalData> into a signal of the form ReadSignal<Option<NormalData>>, is that possible with dioxus?

Thanks!
Caleb

[DogeDark]

You can put signals inside of context which can be modified and react to changes.

Just make sure that the signals have the same scope as the context. (e.g. use_root_context will need Signal::new_in_scope(ScopeId::ROOT)) - I would instead suggest creating the context and signals in the same scope, such as the top-level App component, to avoid that issue.

e.g.

fn main() {
    dioxus::launch(App);
}

#[derive(Clone, Copy)]
struct ToggleCtx {
    toggled: Signal<bool>,
}

#[component]
fn App() -> Element {
    let toggle_ctx = use_context_provider(|| ToggleCtx { toggled: Signal::new(false) });
    let value = (toggle_ctx.toggled)();
    rsx! {
        "Is toggled: {value}",
        ToggleButton {}
    }
}

#[component]
fn ToggleButton() -> Element {
    let ctx: ToggleCtx = use_context();
    
    rsx! {
        button {
            onclick: move |_| ctx.toggled.toggle(),
            "Toggle!"
        }
    }
}

You can also pass resources and memos through context just fine - the same scope stuff I mentioned above also applies to these.

[ActuallyHappening]

Thanks!
I had this same revelation, why did I mention Arc<DbConn> and not think of Signal<DbConn>?