Nested Reactive Store panics with Index out of bounds

[godstail]

Describe the bug
Nested Stores produce panics of "Index out of bounds"

Leptos Dependencies

leptos = { version = "0.8", features = ["csr"] }
leptos_meta = { version = "0.8" }
leptos_router = { version = "0.8" }
reactive_stores = "0.3"

To Reproduce
showcase snippet with instructions and buttons to click:

use leptos::prelude::*;
use reactive_stores::Store;

#[derive(Clone, Debug, Default, PartialEq, Eq, Store)]
pub struct MyStore {
    #[store(key: i32 = |row| row.id)]
    pub inners: Vec<MyInner>,
}

#[derive(Clone, Debug, Default, PartialEq, Eq, Store)]
pub struct MyInner {
    pub id: i32,
    #[store(key: i32 = |row| row.id)]
    pub subs: Vec<MySubInner>,
}

#[derive(Clone, Debug, Default, PartialEq, Eq, Store)]
pub struct MySubInner {
    pub id: i32,
    pub text: String,
}

#[component]
pub fn StoresTests() -> impl IntoView {
    let my_store = Store::new(MyStore {
        inners: vec![
            MyInner {
                id: 1,
                subs: vec![
                    MySubInner {
                        id: 101,
                        text: "sub_101".to_string(),
                    },
                    MySubInner {
                        id: 102,
                        text: "sub_102".to_string(),
                    },
                ],
            },
            MyInner {
                id: 2,
                subs: vec![
                    MySubInner {
                        id: 201,
                        text: "sub_201".to_string(),
                    },
                    MySubInner {
                        id: 202,
                        text: "sub_202".to_string(),
                    },
                ],
            },
        ],
    });

    view! {
        <h2>"Index out of bounds"</h2>
        <p>"1. edit any field"</p>
        <p>"2. change focus (click outside)"</p>
        <p>"3. click any delete sub from the same inner or any delete inner"</p>
        <p>"(for some reason deleting just edited sub without changing focus sometimes works)"</p>
        <br/>
        <For
            each=move || my_store.inners()
            key=|row| row.read().id
            children=move |inner| {
                let inner_id = inner.id().get();
                view! {
                    <For
                        each=move || inner.subs()
                        key=|row| row.read().id
                        children=move |sub| {
                            let sub_id = sub.id().get();
                            view! {
                                <span style="display: flex; gap: 8px;">
                                    {move || format!("id: {}, text: {}", sub.id().get(), sub.text().get())}
                                    <input bind:value=sub.text() />
                                    <button on:click=move |_| {
                                        request_animation_frame(move || {
                                            inner
                                                .update(|inn| {
                                                    inn.subs.retain(|s| s.id != sub_id)
                                                });
                                        });
                                    }>"delete sub"</button>
                                </span>
                                <br/>
                            }
                        }
                    />
                    <button on:click=move |_| {
                        request_animation_frame(move || {
                            my_store
                                .update(|ms| {
                                    ms.inners.retain(|inn| inn.id != inner_id)
                                });
                        });
                    }>"delete inner"</button>
                    <br/>
                    <br/>
                }
            }
        />
    }
}

Next Steps

• I will make a PR
• I would like to make a PR, but need help getting started
• I want someone else to take the time to fix this
• This is a low priority for me and is just shared for your information

Additional context
Index out of bounds panic doesn't appear with reactive_stores 2.5 in this simple example, only with 3.0.
But it does appear in 2.5 in more complicated cases.

If I first reduce Inner collection to 1 sub and then edit+delete the last remaining sub, panic doesn't appear.

[godstail]

I can prevent the panic with this guard:

{move || match inner.subs().read().iter().any(|s| s.id == sub_id) {
    true => view! {
        <span style="display: flex; gap: 8px;">
            {move || format!("id: {}, text: {}", sub.id().get(), sub.text().get())}
            <input bind:value=sub.text() />
            <button on:click=move |_| {
                request_animation_frame(move || {
                    inner
                        .update(|inn| {
                            inn.subs.retain(|s| s.id != sub_id)
                        });
                });
            }>"delete sub"</button>
        </span>
        <br/>
    }.into_any(),
    false => ().into_any()
}}

but Show doesn't help:

<Show when=move || inner.subs().read().iter().any(|s| s.id == sub_id) fallback=|| ()>
(...)                                  
</Show>

[godstail]

no panic if i replace inner.update(...) with

inner.subs().write().retain(|s| s.id != sub_id);

and no need for request_animation_frame

[gbj]

Hm yeah this is somewhat interesting. What causes it to go wrong (as you discover in your last comment) is by modifying the parent store, rather than the actual keyed subfield. Writing to a keyed subfield causes it to update its keys; writing to the parent just notifies the parent which is what's causing the keys to be out of sync.

You can see this if you manually call .update_keys() (the problem goes away)

inner
  .update(|inn| {
    inn.subs.retain(|s| s.id != sub_id)
  });
inner.subs().update_keys();

I should note that inner.subs().write().retain(|s| s.id != sub_id) is strictly better: not only is it shorter but it will not notify siblings. i.e., you always want to write to the most specific field of the store you can, rather than writing to the whole store. Writing to the whole store will notify every field in the store that it might have changed (in which case there's no sense in using a store, you're just using a signal). Whereas writing directly to subs() will only notify subs and its children, not other siblings.

[godstail]

I think I've found maybe related issue with parent not notifying children on change.
Here's slightly modified snippet
(button sets new value to a parent, but changes are shown only after direct children update)

use leptos::prelude::*;
use reactive_stores::Store;

#[derive(Clone, Debug, Default, PartialEq, Eq, Store)]
pub struct MyStore {
    #[store(key: i32 = |row| row.id)]
    pub inners: Vec<MyInner>,
}

#[derive(Clone, Debug, Default, PartialEq, Eq, Store)]
pub struct MyInner {
    pub id: i32,
    #[store(key: i32 = |row| row.id)]
    pub subs: Vec<MySubInner>,
}

#[derive(Clone, Debug, Default, PartialEq, Eq, Store)]
pub struct MySubInner {
    pub id: i32,
    pub text: String,
}

#[component]
pub fn StoresTests() -> impl IntoView {
    let my_store = Store::new(MyStore {
        inners: vec![
            MyInner {
                id: 1,
                subs: vec![],
            },
            MyInner {
                id: 2,
                subs: vec![],
            },
        ],
    });
    
    let max_id = RwSignal::new(202);

    view! {

        <h2>"Children may not be notified by parent"</h2>
        <p>"1. press 'add subs to both inners' button (nothing changes)"</p>
        <p>"2. press any 'add sub' button, suddenly previously added subs also appear"</p>
        <br/>
        <For
            each=move || my_store.inners()
            key=|row| row.read().id
            children=move |inner| {
                let inner_id = inner.id().get();
                view! {
                    <For
                        each=move || inner.subs()
                        key=|row| row.read().id
                        children=move |sub| {
                            let sub_id = sub.id().get();
                            view! {
                                <span style="display: flex; gap: 8px;">
                                    {move || format!("id: {}, text: {}", sub.id().get(), sub.text().get())}
                                    <input bind:value=sub.text() />
                                    <button on:click=move |_| {
                                        inner.subs().write().retain(|s| s.id != sub_id);
                                    }>"delete sub"</button>
                                </span>
                                <br/>
                            }
                        }
                    />
                    <button on:click=move |_| {
                        request_animation_frame(move || {
                            max_id.update(|mi| *mi += 1);
                            let new_id = max_id.get_untracked();
                            inner
                                .update(|inn| {
                                    inn.subs.push(MySubInner {
                                        id: new_id,
                                        text: format!("sub_{new_id}"),
                                    },)
                                });
                        });
                    }>"add sub"</button>
                    <button on:click=move |_| {
                        my_store.inners().write().retain(|inn| inn.id != inner_id);
                    }>"delete inner"</button>
                    <br/>
                    <br/>
                }
            }
        />
        <br/>
        <button on:click=move |_| {
            let new_store = MyStore {
                inners: vec![
                    MyInner {
                        id: 1,
                        subs: vec![
                            MySubInner {
                                id: 101,
                                text: "sub_101".to_string(),
                            },
                            MySubInner {
                                id: 102,
                                text: "sub_102".to_string(),
                            },
                        ],
                    },
                    MyInner {
                        id: 2,
                        subs: vec![
                            MySubInner {
                                id: 201,
                                text: "sub_201".to_string(),
                            },
                            MySubInner {
                                id: 202,
                                text: "sub_202".to_string(),
                            },
                        ],
                    },
                ],
            };
            my_store.set(new_store);
        }>"add subs to both inners"</button>
        
        <br/>
        <div style="white-space: pre-wrap;">{move || format!("{:#?}", my_store.get())}</div>
        
    }
}

[godstail]

The trick here is that ids of Inners are kept the same. If I set completely new value to my_store, then everything updates immediately.

[godstail]

And in this case one step more granular
my_store.write().inners = new_store.inners;
works the same

[godstail]

I tried to update keys like this, but it doesn't seem to fix the issue here

for inner in my_store.inners().iter_unkeyed() {
    inner.subs().update_keys();
}

this works:

for (i, inner) in new_store.inners.into_iter().enumerate() {
    my_store.inners().at_unkeyed(i).subs().set(inner.subs);
}

[godstail]

btw, with all their quirks, stores are an absolutely genius invention for editing nested data