Evan Almloff
d8d11db403
This PR contains just the breaking changes required for the upcoming store implementation. It adds two new primitives: Mutable mapped signals (without a different subscriber list). This lets you scope a writable value and pass it to a child component. It requires two closures to map the immutable and mutable references to the inner signal. With stores, these closures will be derived Boxed readable and writable values (ReadSignal, and WriteSignal). Any readable or writable types can be converted to a read signal or write signal with the boxed method or built in types are automatically converted into the boxed variants when passing into props * map signals mutably * boxed signals * remove mutable borrow type from boxed writable * improve map mut example * restore boxed_mut helper * make boxed readable/writable types copy * Move away from the ReadOnlySignal alias in examples * automatically convert Write * Fix some tests * ReadSignal and WriteSignal * move read only signal alias * make maps copy * store prototype * implement derive macro * Handle generics in the derive macro * Make Selector boxable * derive boxed conversion * Get rid of store type * Remove hardcoded type from derive macro * selector -> store * Refactor store implementation * more vec methods * todo mvc store example * Implement Storable for HashMap * fix write * restore sorting logic in todomvc * derive readable and writable * improve todomvc store example * Result store * Option store * collect dead subscribers * fix clippy and formatting * recognize some common foreign types automatically * fix foreign stores in props * slice and array selectors * clean up store example * remove stores * writable is child owned * fix typo * fix clippy * fix doc tests
91 lines
3.1 KiB
Rust
91 lines
3.1 KiB
Rust
//! A simple example demonstrating how to use signals to modify state from several different places.
|
|
//!
|
|
//! This simple example implements a counter that can be incremented, decremented, and paused. It also demonstrates
|
|
//! that background tasks in use_futures can modify the value as well.
|
|
//!
|
|
//! Most signals implement Into<ReadSignal<T>>, making ReadSignal a good default type when building new
|
|
//! library components that don't need to modify their values.
|
|
|
|
use async_std::task::sleep;
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
let mut running = use_signal(|| true);
|
|
let mut count = use_signal(|| 0);
|
|
let mut saved_values = use_signal(|| vec![0.to_string()]);
|
|
|
|
// use_memo will recompute the value of the signal whenever the captured signals change
|
|
let doubled_count = use_memo(move || count() * 2);
|
|
|
|
// use_effect will subscribe to any changes in the signal values it captures
|
|
// effects will always run after first mount and then whenever the signal values change
|
|
use_effect(move || println!("Count changed to {count}"));
|
|
|
|
// We can do early returns and conditional rendering which will pause all futures that haven't been polled
|
|
if count() > 30 {
|
|
return rsx! {
|
|
h1 { "Count is too high!" }
|
|
button { onclick: move |_| count.set(0), "Press to reset" }
|
|
};
|
|
}
|
|
|
|
// use_future will spawn an infinitely running future that can be started and stopped
|
|
use_future(move || async move {
|
|
loop {
|
|
if running() {
|
|
count += 1;
|
|
}
|
|
sleep(std::time::Duration::from_millis(400)).await;
|
|
}
|
|
});
|
|
|
|
// use_resource will spawn a future that resolves to a value
|
|
let _slow_count = use_resource(move || async move {
|
|
sleep(std::time::Duration::from_millis(200)).await;
|
|
count() * 2
|
|
});
|
|
|
|
rsx! {
|
|
h1 { "High-Five counter: {count}" }
|
|
button { onclick: move |_| count += 1, "Up high!" }
|
|
button { onclick: move |_| count -= 1, "Down low!" }
|
|
button { onclick: move |_| running.toggle(), "Toggle counter" }
|
|
button { onclick: move |_| saved_values.push(count.to_string()), "Save this value" }
|
|
button { onclick: move |_| saved_values.clear(), "Clear saved values" }
|
|
|
|
// We can do boolean operations on the current signal value
|
|
if count() > 5 {
|
|
h2 { "High five!" }
|
|
}
|
|
|
|
// We can cleanly map signals with iterators
|
|
for value in saved_values.iter() {
|
|
h3 { "Saved value: {value}" }
|
|
}
|
|
|
|
// We can also use the signal value as a slice
|
|
if let [ref first, .., ref last] = saved_values.read().as_slice() {
|
|
li { "First and last: {first}, {last}" }
|
|
} else {
|
|
"No saved values"
|
|
}
|
|
|
|
// You can pass a value directly to any prop that accepts a signal
|
|
Child { count: doubled_count() }
|
|
Child { count: doubled_count }
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
fn Child(mut count: ReadSignal<i32>) -> Element {
|
|
println!("rendering child with count {count}");
|
|
|
|
rsx! {
|
|
h1 { "{count}" }
|
|
}
|
|
}
|