61 lines
1.5 KiB
Rust
61 lines
1.5 KiB
Rust
//! Example: Reducer Pattern
|
|
//! -----------------
|
|
//!
|
|
//! This example shows how to encapsulate state in dioxus components with the reducer pattern.
|
|
//! This pattern is very useful when a single component can handle many types of input that can
|
|
//! be represented by an enum.
|
|
//!
|
|
//! Currently we don't have a reducer pattern hook. If you'd like to add it,
|
|
//! feel free to make a PR.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus_desktop::launch(app);
|
|
}
|
|
|
|
fn app(cx: Scope) -> Element {
|
|
let state = use_state(cx, PlayerState::new);
|
|
|
|
cx.render(rsx!(
|
|
div {
|
|
h1 {"Select an option"}
|
|
h3 { "The radio is... ", state.is_playing(), "!" }
|
|
button { onclick: move |_| state.make_mut().reduce(PlayerAction::Pause),
|
|
"Pause"
|
|
}
|
|
button { onclick: move |_| state.make_mut().reduce(PlayerAction::Play),
|
|
"Play"
|
|
}
|
|
}
|
|
))
|
|
}
|
|
|
|
enum PlayerAction {
|
|
Pause,
|
|
Play,
|
|
}
|
|
|
|
#[derive(Clone)]
|
|
struct PlayerState {
|
|
is_playing: bool,
|
|
}
|
|
|
|
impl PlayerState {
|
|
fn new() -> Self {
|
|
Self { is_playing: false }
|
|
}
|
|
fn reduce(&mut self, action: PlayerAction) {
|
|
match action {
|
|
PlayerAction::Pause => self.is_playing = false,
|
|
PlayerAction::Play => self.is_playing = true,
|
|
}
|
|
}
|
|
fn is_playing(&self) -> &'static str {
|
|
match self.is_playing {
|
|
true => "currently playing!",
|
|
false => "not currently playing",
|
|
}
|
|
}
|
|
}
|