mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-24 05:03:06 +00:00
61 lines
2.5 KiB
Rust
61 lines
2.5 KiB
Rust
//! Example: Tasks
|
|
//! --------------
|
|
//!
|
|
//! Built around the same system that powers suspense, Dioxus also allows users to write arbitrary tasks that can modify
|
|
//! state asynchronously. `use_task` takes a future and returns a task handle and an option that holds the tasks's return
|
|
//! value. When the task completes, the component will re-render with the result freshly available.
|
|
//!
|
|
//! Tasks don't necessarily need to complete, however. It would be completely reasonable to wire up a websocket receiver
|
|
//! in a task and have it work infinitely while the app is running. If the socket throws an error, the task could complete
|
|
//! and the UI could present a helpful error message.
|
|
//!
|
|
//! Tasks also return the `TaskHandle` type which lets other component logic start, stop, and restart the task at any time.
|
|
//! Tasks are very much like an async-flavoroued coroutine, making them incredibly powerful.
|
|
//!
|
|
//! Tasks must be valid for the 'static lifetime, so any state management neeeds to be cloned into the closure. `use_state`
|
|
//! has a method called `for_async` which generates an AsyncUseState wrapper. This has a very similar API to the regualr
|
|
//! `use_state` but is `static.
|
|
//!
|
|
//! Remeber `use_task` is a hook! Don't call it out of order or in loops. You might aaccidentally swap the task handles
|
|
//! and break things in subtle ways.
|
|
//!
|
|
//! Whenever a component is scheduled for deletion, the task is dropped. Make sure that whatever primitives used in the
|
|
//! task have a valid drop implementation and won't leave resources tied up.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
pub static Example: FC<()> = |(cx, props)| {
|
|
let count = use_state(cx, || 0);
|
|
let mut direction = use_state(cx, || 1);
|
|
|
|
// Tasks are 'static, so we need to copy relevant items in
|
|
let (async_count, dir) = (count.for_async(), *direction);
|
|
|
|
let (task, result) = use_task(cx, move || async move {
|
|
loop {
|
|
gloo_timers::future::TimeoutFuture::new(250).await;
|
|
*async_count.get_mut() += dir;
|
|
}
|
|
});
|
|
|
|
cx.render(rsx! {
|
|
div {
|
|
h1 {"count is {count}"}
|
|
button {
|
|
"Stop counting"
|
|
onclick: move |_| task.stop()
|
|
}
|
|
button {
|
|
"Start counting"
|
|
onclick: move |_| task.resume()
|
|
}
|
|
button {
|
|
"Switch counting direcion"
|
|
onclick: move |_| {
|
|
direction *= -1;
|
|
task.restart();
|
|
}
|
|
}
|
|
}
|
|
})
|
|
};
|