Struggling to understand how i should declare nested stores

💙Beginner✨Reactivity

Solid API

Hello everyone,
I hope you're doing well.

In one of applications i'm making, i have a state which is stored in a Store, and i would like to pass certains fields of it into some components so they can modify it (not really a state and view model ik). That's why i'm trying to create nested stores which would link to the state.

Here's how i'm currently doing things :

export function App() {
  const [state, setState] = createStore({a: {b: ...}})

  return (
    <>
      //...
      <Component b={state.b} />
    </>
  )
}

function B(props: {b: Store<...>}) {
  const [b, setB] = createStore(props.b)

  function someHandler() {
    setB(...)
  }

  return (
    <>
      {b}
    </>  
  )
}

export function App() {
  const [state, setState] = createStore({a: {b: ...}})

  return (
    <>
      //...
      <Component b={state.b} />
    </>
  )
}

function B(props: {b: Store<...>}) {
  const [b, setB] = createStore(props.b)

  function someHandler() {
    setB(...)
  }

  return (
    <>
      {b}
    </>  
  )
}

But that doesn't work. I'm kinda confused because the documentation shows that nested stores should be possible (see the advanced paragraph at https://docs.solidjs.com/concepts/stores#stores), and i'm not doing crazy things, juste passing an object in the props.

Why isn't this working but in the example it is ?

Thank you in advance

Stores - Solid Docs

Manage complex nested state efficiently with stores that provide fine-grained reactivity for objects and arrays in Solid.

SolidJS•3mo ago•

5 replies

NovaliX

Struggling to understand how i should declare nested stores

💙Beginner✨Reactivity

Solid API

export function App() {
  const [state, setState] = createStore({a: {b: ...}})

  return (
    <>
      //...
      <Component b={state.b} />
    </>
  )
}

function B(props: {b: Store<...>}) {
  const [b, setB] = createStore(props.b)

  function someHandler() {
    setB(...)
  }

  return (
    <>
      {b}
    </>  
  )
}

export function App() {
  const [state, setState] = createStore({a: {b: ...}})

  return (
    <>
      //...
      <Component b={state.b} />
    </>
  )
}

function B(props: {b: Store<...>}) {
  const [b, setB] = createStore(props.b)

  function someHandler() {
    setB(...)
  }

  return (
    <>
      {b}
    </>  
  )
}

Stores - Solid Docs

Manage complex nested state efficiently with stores that provide fine-grained reactivity for objects and arrays in Solid.

Struggling to understand how i should declare nested stores

Similar Threads

Struggling to understand how i should declare nested stores

Similar Threads

Similar Threads

Similar Threads