Confusion about applicability of async reducers because of race conditions

[Ddystopia]

Hello,

while reading the book I saw that yewdux supports async reducers and I started wandering, is it free of race conditions? I wrote following code sample:

use yew::{prelude::*, platform::spawn_local};
use yewdux::prelude::*;
use yew::platform::time::sleep;
use std::{time::Duration, rc::Rc};

#[derive(Clone, PartialEq, Store)]
struct Store {
    numbers: Vec<i32>,
}

impl Default for Store {
    fn default() -> Self {
        Self {
            numbers: vec![1, 2, 3],
        }
    }
}

enum Reducer {
    Append1(Vec<i32>),
    Append2(Vec<i32>),
}

#[async_reducer]
impl AsyncReducer<Store> for Reducer {
    async fn apply(self, mut state: Rc<Store>) -> Rc<Store> {
        let (duration, vec) = match self {
            Self::Append1(v) => (Duration::from_secs(1), v),
            Self::Append2(v) => (Duration::from_secs(2), v),
        };

        sleep(duration).await;
        let s = Rc::make_mut(&mut state);
        s.numbers.extend(vec);

        state
    }
}

fn main() {
    spawn_local(async {
        let reducer = Reducer::Append1(vec![10, 20, 30]);
        Dispatch::<Store>::new().apply_future(reducer).await;
    });

    spawn_local(async {
        let reducer = Reducer::Append2(vec![100, 200, 300]);
        Dispatch::<Store>::new().apply_future(reducer).await;
    });

    yew::Renderer::<App>::new().render();
}

#[function_component]
fn App() -> Html {
    let numbers = use_selector(|state: &Store| state.numbers.clone());

    html! {
        <div>
            <h1>{"Numbers"}</h1>
            <ul>
                { for numbers.iter().map(|n| html! { <li>{n}</li> }) }
            </ul>
        </div>
    }
}

It shows 1 2 3, then let it be a network request for a 1 second that appends it with 10 20 30 and request that appends with 100 200 300. As you can see, it shows:

1 2 3
1 2 3 10 20 30
1 2 3 100 200 300

I don't think that this is a bug or a problem, we could just use async functions that will dispatch sync reducers but the question is what is the purpose of async reducers? I can't come up with any use case - any way it will capture the state that it had on the moment of calling and discard everything done to the store after that point when resolved.

[intendednull]

Thanks for pointing this out! I agree it's a rather large footgun. I do like message-based action though.. perhaps we give the user a dispatch instead of a snapshot? Not sure how much more useful it would be than other provided interfaces.

Reducers are nice for organizing and structuring your mutations into predictable modules. Having access to an async context is definitely useful, however I do agree right now it may be doing more harm than good atm.