SolidJS•5mo ago

Adding new element to an array before the last element inside solid store

const [tabStore, setTabStore] = createStore<{ contents: TabContent[] }>({
  contents: [
    {
      id: 'original',
      button: (
        <>
          Original <Icon namespace="Globe" {...iconProps} />
        </>
      )
    },
    {
      id: 'new',
      button: (
        <>
          <Icon namespace="Add" {...iconProps} /> New Effect
        </>
      )
    }
  ]
})


  const addNewTab = (newTab: TabContent) => {
    setTabStore('contents', tabs => [
      ...tabs.slice(0, tabs.length - 1),
      newTab,
      tabs[tabs.length - 1]
    ])
  }

const [tabStore, setTabStore] = createStore<{ contents: TabContent[] }>({
  contents: [
    {
      id: 'original',
      button: (
        <>
          Original <Icon namespace="Globe" {...iconProps} />
        </>
      )
    },
    {
      id: 'new',
      button: (
        <>
          <Icon namespace="Add" {...iconProps} /> New Effect
        </>
      )
    }
  ]
})


  const addNewTab = (newTab: TabContent) => {
    setTabStore('contents', tabs => [
      ...tabs.slice(0, tabs.length - 1),
      newTab,
      tabs[tabs.length - 1]
    ])
  }

Is there other way to update like this. I am thinking of if I can add new element using index like splice(index, 1, newElement) inside solidStore. I am also trying "path update", but it doesn't match my scenario. Thanks for your help!

1 Reply

bigmistqke•5mo ago

U can use produce, see https://docs.solidjs.com/reference/store-utilities/produce#produce Its callback returns a proxy on which you can do mutations, and under the hood it will transform those mutations into immutable operations.

Gaming

Programming

Adding new element to an array before the last element inside solid store