Skip to content

Reliable use_reducer dispatch and use_state setter #2126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siku2 merged 14 commits into from
Nov 11, 2021
Merged

Reliable use_reducer dispatch and use_state setter #2126

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5f98866
Add Redirect Comp.
futursolo Oct 6, 2021
cbea8b0
Merge branch 'yewstack:master' into master
futursolo Oct 9, 2021
d2935af
Fix router behaviour.
futursolo Oct 9, 2021
02d1bd5
Fix output.
futursolo Oct 9, 2021
114672d
Fix pr-flow.
futursolo Oct 9, 2021
118a8dc
Remove Redirect.
futursolo Oct 14, 2021
02ce5dd
Readd 77b46bf.
futursolo Oct 15, 2021
caead16
Merge branch 'yewstack:master' into master
futursolo Oct 17, 2021
a4ca25e
Reliable dispatch for use_reducer.
futursolo Oct 31, 2021
333fc87
Detachable Dispatcher and Setter.
futursolo Oct 31, 2021
a094b00
Update docs wording.
futursolo Oct 31, 2021
d9afefc
Update website/docs/concepts/function-components/pre-defined-hooks.md
futursolo Nov 11, 2021
616030a
Update website/docs/concepts/function-components/pre-defined-hooks.md
futursolo Nov 11, 2021
f800148
Update website/docs/concepts/function-components/pre-defined-hooks.md
futursolo Nov 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 5 additions & 92 deletions examples/function_todomvc/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
use gloo::storage::{LocalStorage, Storage};
use state::{Entry, Filter, State};
use std::rc::Rc;
use state::{Action, Filter, State};
use strum::IntoEnumIterator;
use yew::{classes, function_component, html, use_effect_with_deps, use_reducer, Callback};

Expand All @@ -13,100 +12,14 @@ use components::{
info_footer::InfoFooter,
};

pub enum Action {
Add(String),
Edit((usize, String)),
Remove(usize),
SetFilter(Filter),
ToggleAll,
Toggle(usize),
ClearCompleted,
}

const KEY: &str = "yew.functiontodomvc.self";

#[function_component(App)]
fn app() -> Html {
let state = use_reducer(
|prev: Rc<State>, action: Action| match action {
Action::Add(description) => {
let mut entries = prev.entries.clone();
entries.push(Entry {
id: entries.last().map(|entry| entry.id + 1).unwrap_or(1),
description,
completed: false,
});
State {
entries,
filter: prev.filter,
}
}
Action::Remove(id) => {
let mut entries = prev.entries.clone();
entries.retain(|entry| entry.id != id);
State {
entries,
filter: prev.filter,
}
}
Action::Toggle(id) => {
let mut entries = prev.entries.clone();
let entry = entries.iter_mut().find(|entry| entry.id == id);
if let Some(entry) = entry {
entry.completed = !entry.completed;
}
State {
entries,
filter: prev.filter,
}
}
Action::Edit((id, description)) => {
let mut entries = prev.entries.clone();

if description.is_empty() {
entries.retain(|entry| entry.id != id)
}

let entry = entries.iter_mut().find(|entry| entry.id == id);
if let Some(entry) = entry {
entry.description = description;
}
State {
entries,
filter: prev.filter,
}
}
Action::ToggleAll => {
let mut entries = prev.entries.clone();
for entry in &mut entries {
if prev.filter.fits(entry) {
entry.completed = !entry.completed;
}
}
State {
entries,
filter: prev.filter,
}
}
Action::ClearCompleted => {
let mut entries = prev.entries.clone();
entries.retain(|e| Filter::Active.fits(e));
State {
entries,
filter: prev.filter,
}
}
Action::SetFilter(filter) => State {
filter,
entries: prev.entries.clone(),
},
},
// Initial state
State {
entries: LocalStorage::get(KEY).unwrap_or_else(|_| vec![]),
filter: Filter::All, // TODO: get from uri
},
);
let state = use_reducer(|| State {
entries: LocalStorage::get(KEY).unwrap_or_else(|_| vec![]),
filter: Filter::All, // TODO: get from uri
});

// Effect
use_effect_with_deps(
Expand Down
102 changes: 101 additions & 1 deletion examples/function_todomvc/src/state.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
use std::rc::Rc;
use yew::prelude::*;

use serde::{Deserialize, Serialize};
use strum_macros::{EnumIter, ToString};

#[derive(Clone, Debug, Serialize, Deserialize)]
#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
pub struct State {
pub entries: Vec<Entry>,
pub filter: Filter,
Expand Down Expand Up @@ -38,3 +41,100 @@ impl Filter {
}
}
}

pub enum Action {
Add(String),
Edit((usize, String)),
Remove(usize),
SetFilter(Filter),
ToggleAll,
Toggle(usize),
ClearCompleted,
}

impl Reducible for State {
type Action = Action;

fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
match action {
Action::Add(description) => {
let mut entries = self.entries.clone();
entries.push(Entry {
id: entries.last().map(|entry| entry.id + 1).unwrap_or(1),
description,
completed: false,
});
State {
entries,
filter: self.filter,
}
.into()
}
Action::Remove(id) => {
let mut entries = self.entries.clone();
entries.retain(|entry| entry.id != id);
State {
entries,
filter: self.filter,
}
.into()
}
Action::Toggle(id) => {
let mut entries = self.entries.clone();
let entry = entries.iter_mut().find(|entry| entry.id == id);
if let Some(entry) = entry {
entry.completed = !entry.completed;
}
State {
entries,
filter: self.filter,
}
.into()
}
Action::Edit((id, description)) => {
let mut entries = self.entries.clone();

if description.is_empty() {
entries.retain(|entry| entry.id != id)
}

let entry = entries.iter_mut().find(|entry| entry.id == id);
if let Some(entry) = entry {
entry.description = description;
}
State {
entries,
filter: self.filter,
}
.into()
}
Action::ToggleAll => {
let mut entries = self.entries.clone();
for entry in &mut entries {
if self.filter.fits(entry) {
entry.completed = !entry.completed;
}
}
State {
entries,
filter: self.filter,
}
.into()
}
Action::ClearCompleted => {
let mut entries = self.entries.clone();
entries.retain(|e| Filter::Active.fits(e));
State {
entries,
filter: self.filter,
}
.into()
}
Action::SetFilter(filter) => State {
filter,
entries: self.entries.clone(),
}
.into(),
}
}
}
Loading