dioxus/packages/recoil/examples/api_mvc.rs

//! RecoilAPI Pattern
//! ----------------
//! This example demonstrates how the use_recoil_callback hook can be used to build view controllers.
//! These view controllers are cheap to make and can be easily shared across the app to provide global
//! state logic to many components.
//!
//! This pattern is meant to replace the typical use_dispatch pattern used in Redux apps.

use dioxus_core::prelude::*;
use recoil::*;

const TITLE: Atom<String> = |_| format!("Heading");
const SUBTITLE: Atom<String> = |_| format!("Subheading");

struct TitleController(RecoilApi);
impl TitleController {
    fn new(api: RecoilApi) -> Self {
        Self(api)
    }
    fn uppercase(&self) {
        self.0.modify(&TITLE, |f| *f = f.to_uppercase());
        self.0.modify(&SUBTITLE, |f| *f = f.to_uppercase());
    }
    fn lowercase(&self) {
        self.0.modify(&TITLE, |f| *f = f.to_lowercase());
        self.0.modify(&SUBTITLE, |f| *f = f.to_lowercase());
    }
}

fn main() {
    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(|ctx, _| {
        let title = use_recoil_value(ctx, &TITLE);
        let subtitle = use_recoil_value(ctx, &SUBTITLE);
        let controller = use_recoil_callback(ctx, TitleController::new);

        rsx! { in ctx,
            div {
                "{title}"
                "{subtitle}"
                button { onclick: move |_| controller.uppercase(), "Uppercase" }
                button { onclick: move |_| controller.lowercase(), "Lowercase" }
            }
        }
    }))
}