Merge pull request #9 from Firstyear/multi_component

Add multi-component example to show how state can be shared
intendednull · Jul 26, 2021 · f2c970a · f2c970a
2 parents 26e7653 + a0b2d87
commit f2c970a
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 0 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -11,4 +11,5 @@ members = [
   "examples/store",
   "examples/functional",
   "examples/input",
+  "examples/multi_component",
 ]
diff --git a/examples/multi_component/Cargo.toml b/examples/multi_component/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "multi_component"
+version = "0.1.0"
+authors = ["William Brown <[email protected]>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+serde = { version = "1.0.114", features = ["rc"] }
+yewdux = { path = "../../yewdux" }
+yew = { git = "https://github.com/yewstack/yew.git" }
+yewtil = {  git = "https://github.com/yewstack/yew.git" }
+yew-services = { git = "https://github.com/yewstack/yew.git" }
diff --git a/examples/multi_component/index.html b/examples/multi_component/index.html
@@ -0,0 +1,4 @@
+<html>
+  <head>
+  </head>
+</html>
diff --git a/examples/multi_component/src/main.rs b/examples/multi_component/src/main.rs
@@ -0,0 +1,115 @@
+use std::rc::Rc;
+
+use yew::prelude::*;
+use yewdux::prelude::*;
+use yew_services::ConsoleService;
+
+#[derive(Default, Clone)]
+struct State {
+    count: u32,
+}
+
+struct App {
+    /// Our local version of state.
+    state: Rc<State>,
+    dispatch: Dispatch<BasicStore<State>>,
+    link: ComponentLink<Self>,
+}
+
+enum Msg {
+    /// Message to receive new state.
+    State(Rc<State>),
+    Increment,
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            dispatch: Dispatch::bridge_state(link.callback(Msg::State)),
+            state: Default::default(),
+            link,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::State(state) => {
+                self.state = state;
+                true
+            }
+            Msg::Increment => {
+                self.dispatch.reduce(|s| {
+                    ConsoleService::log("count += 1");
+                    s.count += 1
+                });
+                true
+            }
+        }
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        // We use self.link.callback here because onclick = dispatch_withcallback appears
+        // to not be working at this time.
+        html! {
+            <>
+                <CountApp/>
+                <CountApp/>
+                <button onclick=self.link.callback(|_| Msg::Increment)>{"+1"}</button>
+            </>
+        }
+    }
+}
+
+struct CountApp {
+    state: Rc<State>,
+    _dispatch: Dispatch<BasicStore<State>>,
+}
+
+enum CountMsg {
+    /// Message to receive new state.
+    State(Rc<State>),
+}
+
+impl Component for CountApp {
+    type Message = CountMsg;
+    type Properties = ();
+
+    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            _dispatch: Dispatch::bridge_state(link.callback(CountMsg::State)),
+            state: Default::default(),
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            CountMsg::State(state) => {
+                self.state = state;
+                true
+            }
+        }
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let count = self.state.count;
+        html! {
+            <h1>{ count }</h1>
+        }
+    }
+}
+
+
+pub fn main() {
+    yew::start_app::<App>();
+}