How to save a reactive field to another field

[mahdi739]

Hi,

I have a single Store for managing my application's state, which includes a list of sessions and a selected_session to track the currently selected session. I want to pass the selected_session field to a Content component as a reactive value so that Content can use its fields reactively.

For this purpose, I explored three approaches, each with its own issues:

1. selected_session: Option<Session>

In this approach, the problem is that the selected_session passed to the Content component is not reactively connected to the state's sessions list. When I click the "Modify Selected Title" button, the list items do not update.

The code:

use leptos::{either::Either, leptos_dom::logging::console_log, prelude::*};
use reactive_stores::{Field, OptionStoreExt, Store, StoreFieldIterator};

#[derive(Default, Store, Debug, Clone)]
pub struct State {
  #[store(key: usize = |session| session.id)]
  pub sessions: Vec<Session>,
  pub selected_session: Option<Session>,
}

#[derive(Default, Store, Debug, Clone, PartialEq, Eq)]
pub struct Session {
  pub id: usize,
  pub title: String,
}

#[component]
pub fn App() -> impl IntoView {
  let state = Store::new(State {
    sessions: vec![
      Session { id: 0, title: "Title1".to_string() },
      Session { id: 1, title: "Title2".to_string() },
      Session { id: 2, title: "Title30".to_string() },
    ],
    selected_session: None,
  });

  view! {
    <ul>
      <For each=move || state.sessions() key=|item| item.id().get() let(session)>
        <li on:click=move |_| {
          state.selected_session().set(Some(session.get()));
        }>{session.title()}</li>
      </For>
    </ul>
    <button on:click=move |_| {
      state.selected_session().map(|ss| ss.title().update(|title| title.push_str("0")));
    }>"Modify Selected Title"</button>
    <Show when=move || state.selected_session().get().is_some()>
      <Content session={state.selected_session().unwrap()} />
    </Show>
  }
}

#[component]
pub fn Content(#[prop(into)] session: Field<Session>) -> impl IntoView {
  console_log("Hey!");
  view! {
    {move || {
      if session.title().with(String::len) == 7 {
        Either::Right(view! { "Title has seven letters" })
      } else {
        Either::Left(view! { "Title doesn't have seven letters" })
      }
    }}
  }
}

2. selected_session: Option<Field<Session>>

In this approach, the issue is that selected_session causes the entire Content component to recreate whenever a new session is selected. If you inspect the Element tab in the browser's dev tools, you can see that the Content component remounts, even when its value remains unchanged.

The code:

#[derive(Default, Store, Debug, Clone)]
pub struct State {
  #[store(key: usize = |session| session.id)]
  pub sessions: Vec<Session>,
  pub selected_session: Option<Field<Session>>,
}

#[derive(Default, Store, Debug, Clone, PartialEq, Eq)]
pub struct Session {
  pub id: usize,
  pub title: String,
}

#[component]
pub fn App() -> impl IntoView {
  let state = Store::new(State {
    sessions: vec![
      Session { id: 0, title: "Title1".to_string() },
      Session { id: 1, title: "Title2".to_string() },
      Session { id: 2, title: "Title30".to_string() },
    ],
    selected_session: None,
  });

  view! {
    <ul>
      <For each=move || state.sessions() key=|item| item.id().get() let(session)>
        <li on:click=move |_| {
          state.selected_session().set(Some(session.into()));
        }>{session.title()}</li>
      </For>
    </ul>
    <button on:click=move |_| {
      state.selected_session().get().map(|ss| ss.title().update(|title| title.push_str("0")));
    }>"Modify Selected Title"</button>
    <Show when=move || state.selected_session().get().is_some()>
      <Content session={state.selected_session().unwrap().get()} />
    </Show>
  }
}

#[component]
pub fn Content(#[prop(into)] session: Field<Session>) -> impl IntoView {
  console_log("Hey!");
  view! {
    {move || {
      if session.title().with(String::len) == 7 {
        Either::Right(view! { "Title has seven letters" })
      } else {
        Either::Left(view! { "Title doesn't have seven letters" })
      }
    }}
  }
}

3. selected_id: Option<usize>

In this approach, the code becomes verbose. I have to look up the selected_session from the sessions list using the selected_id every time I need to access it, and I must pass the entire state to the Content component.
The code:

#[derive(Default, Store, Debug, Clone)]
pub struct State {
  #[store(key: usize = |session| session.id)]
  pub sessions: Vec<Session>,
  pub selected_id: Option<usize>,
}

#[derive(Default, Store, Debug, Clone, PartialEq, Eq)]
pub struct Session {
  pub id: usize,
  pub title: String,
}

#[component]
pub fn App() -> impl IntoView {
  let state = Store::new(State {
    sessions: vec![
      Session { id: 0, title: "Title1".to_string() },
      Session { id: 1, title: "Title2".to_string() },
      Session { id: 2, title: "Title30".to_string() },
    ],
    selected_id: None,
  });

  view! {
    <ul>
      <For each=move || state.sessions() key=|item| item.id().get() let(session)>
        <li on:click=move |_| {
          state.selected_id().set(Some(session.id().get()));
        }>{session.title()}</li>
      </For>
    </ul>
    <button on:click=move |_| {
      state
        .selected_id()
        .map(|selected_id| {
          state
            .sessions()
            .iter_unkeyed()
            .find(|session| *session.id().read() == *selected_id.read())
            .map(|selected_session| {
              selected_session.title().update(|title| title.push_str("0"))
            })
        });
    }>"Modify Selected Title"</button>
    <Show when=move || state.selected_id().get().is_some()>
      <Content state={state} />
    </Show>
  }
}

#[component]
pub fn Content(#[prop(into)] state: Field<State>) -> impl IntoView {
  console_log("Hey!");
  view! {
    {move || {
      if state
        .selected_id()
        .map(|selected_id| {
          state
            .sessions()
            .iter_unkeyed()
            .find(|session| *session.id().read() == *selected_id.read())
        })
        .flatten()
        .unwrap()
        .title()
        .with(String::len) == 7
      {
        Either::Right("Title has seven letters")
      } else {
        Either::Left("Title doesn't have seven letters")
      }
    }}
  }
}

The third approach produces the correct result: it doesn't recreate the Content component unnecessarily, and modifications to the selected session work as expected. However, the code feels overly complex and bloated from a design perspective.

In this repo you can find the code from the first approach:
https://github.com/mahdi739/leptos_rerender_issue

[gbj]

Option 1 works exactly as expected (or rather, doesn't work exactly as expected): the Session you store is a deep clone of the values at the moment that you store it, but there doesn't (and can't, and shouldn't) exist any connection between the original and the clone.

Option 2 is also doing what it should do, although it's not what you're hoping it will do: you are reading reactively from state.selected_session inside the effect controlling the Show, not inside the Content, so it does rerender the Content again. This is what would happen with any component and any signal being read in this way and passed to a component, rather than passed to the component as a signal. To put it another way: the problem is that you're passing the value that you .get() out of the Field, rather than passing the Field

      <Show when=move || state.selected_session().get().is_some()>
        // add a log here
        {leptos::logging::log!("running this again!")}
        <Content
          // this reactive read is tracked inside the Show, rather than being untracked
          session={state.selected_session().unwrap().get()}
        />
      </Show>

However, if you don't do that .get(), and change Content to take a Field<Field<Session>> then (I think) it works as you want it to:

// ...
      <Show when=move || state.selected_session().get().is_some()>
        <Content session={state.selected_session().unwrap()} />
      </Show>
    }
}

#[component]
pub fn Content(#[prop(into)] session: Field<Field<Session>>) -> impl IntoView {
    leptos::logging::log!("Hey!");
    view! {
      {move || {
        // add .get() here
        if session.get().title().with(String::len) == 7 {
          Either::Right(view! { "Title has seven letters" })
        } else {
          Either::Left(view! { "Title doesn't have seven letters" })
        }
      }}
    }
}

Option 3 This is what I tend to use.

In this approach, the code becomes verbose. I have to look up the selected_session from the sessions list using the selected_id every time I need to access it

Presumably you could/would just define a method for this? (You can use a newtype or an extension trait to add a method to Store<State> and then simply call it.)

and I must pass the entire state to the Content component.

Fair enough.

[mahdi739]

Thank you so much for the explanation! 🙏

Your suggestion for option 2, wrapping the Field<Session> in another Field, seems to work nicely. I'll go with this for now. (But I have a bad feeling that the problem has just shifted to another layer 😁)

Regarding option 3, even using methods and extension traits feels too verbose and inconsistent. In my real project which has other nested selected_things, I have to define the exact type, like impl Ext for AtIndex<...>, which is also inconsistent because I might use that field elsewhere as an AtKeyed for example.

A Suggestion:
I was thinking that stores could have a lower-level mechanism for setting a value from another reactive field without requiring a deep clone. Something like StoreField::replace(field1, field2).

[gbj]

But I have a bad feeling that the problem has just shifted to another layer

I don't think it has, in this case: you're saying "I'm passing you a reactive thing that holds another reactive thing." If you were storing it in a separate signal it might be easier to grok, as it would be the difference between the prop being Signal<Field<T>> and just Field<T>

I have to define the exact type, like impl Ext for AtIndex<...>

That seems unlikely to me, because you can impl <T> Ext for T where T: StoreField<Value = SomeType>. (I may have the associated type name wrong off the top of my head)

[mahdi739]

Hi @gbj, I think I found an inconsistency in the second option you suggested.
I added an input box in the Content and bound its value to the title. The title is not bound to the correct item. (It sticks to the first item selected.)
Updated repo:
https://github.com/mahdi739/leptos_rerender_issue

[gbj]

Here, you are reading non-reactively from session:

bind:value=session.get().title()

I would suggest something like this following instead:

{move || {
  let session = session.get();
  view! { <input type="text" bind:value=session.title() /> }
}}