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
2.7 KiB
2.7 KiB
Dioxus Signals
Dioxus Signals is an ergonomic Copy runtime for data with local subscriptions.
Copy Data
All signals implement Copy, even if the inner value does not implement copy. This makes it easy to move any data into futures or children.
use dioxus::prelude::*;
use dioxus_signals::*;
#[component]
fn App() -> Element {
let signal = use_signal(|| "hello world".to_string());
spawn(async move {
// signal is Copy even though String is not copy
print!("{signal}");
});
rsx! {
"{signal}"
}
}
Local Subscriptions
Signals will only subscribe to components when you read from the signal in that component. It will never subscribe to a component when reading data in a future or event handler.
use dioxus::prelude::*;
use dioxus_signals::*;
#[component]
fn App() -> Element {
// Because signal is never read in this component, this component will not rerun when the signal changes
let mut signal = use_signal(|| 0);
rsx! {
button {
onclick: move |_| {
signal += 1;
},
"Increase"
}
for id in 0..10 {
Child {
signal,
}
}
}
}
#[derive(Props, Clone, PartialEq)]
struct ChildProps {
signal: Signal<usize>,
}
fn Child(props: ChildProps) -> Element {
// This component does read from the signal, so when the signal changes it will rerun
rsx! {
"{props.signal}"
}
}
Because subscriptions happen when you read from (not create) the data, you can provide signals through the normal context API:
use dioxus::prelude::*;
use dioxus_signals::*;
#[component]
fn App() -> Element {
// Because signal is never read in this component, this component will not rerun when the signal changes
use_context_provider(|| Signal::new(0));
rsx! {
Child {}
}
}
#[component]
fn Child() -> Element {
let signal: Signal<i32> = use_context();
// This component does read from the signal, so when the signal changes it will rerun
rsx! {
"{signal}"
}
}
Computed Data
In addition to local subscriptions in components, dioxus-signals provides a way to derive data with local subscriptions.
The use_memo hook will only rerun when any signals inside the hook change:
use dioxus::prelude::*;
use dioxus_signals::*;
#[component]
fn App() -> Element {
let mut signal = use_signal(|| 0);
let doubled = use_memo(move || signal * 2);
rsx! {
button {
onclick: move |_| signal += 1,
"Increase"
}
Child {
signal: doubled
}
}
}
#[component]
fn Child(signal: ReadSignal<usize>) -> Element {
rsx! {
"{signal}"
}
}