{/* Accessing a store value */} {mySignal()} {/* Accessing a signal */}
)}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["When a store is created, it starts with the initial state but does ",n(e.em,{children:"not"}),` immediately set up signals to track changes.
These signals are created `,n(e.strong,{children:"lazily"}),", meaning they are only formed when accessed within a reactive context."]}}),`
`,n(e.p,{children:"Once data is used within a reactive context, such as within the return statement of a component function, computed property, or an effect, a signal is created and dependencies are established."}),`
`,n(e.p,{children:"For example, if you wanted to print out every new user, adding the console log below will not work because it is not within a tracked scope."}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"App"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"store"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"userCount"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"users"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" [ "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ]"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#BABED8"},children:"addUser"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#613aa9"},get children(){return[n(e.span,{style:{"--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--1":"#82AAFF"},children:"log"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"("}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"store"}),n(e.span,{style:{"--0":"#613aa9","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"users"}),n(e.span,{style:{"--0":"#613aa9"},get children(){return[n(e.span,{style:{"--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--1":"#82AAFF"},children:"at"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"("}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"-"}),n(e.span,{style:{"--0":"#125495","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:")) "}),n(e.span,{style:{"--0":"#525354","--1":"#a3a5af","--1fs":"italic"},children:"// This won't work"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Hello, "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"store"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"users["}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"username"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"p"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"User count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"store"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"userCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"addUser"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Add user"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const App = () => { const [store, setStore] = createStore({ userCount: 3, users: [ ... ], }) const addUser = () => { ... } console.log(store.users.at(-1)) // This won't work return (
)}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(r,{get children(){return[n(e.p,{children:"Separating the read and write capabilities of a store provides a valuable debugging advantage."}),n(e.p,{children:"This separation facilitates the tracking and control of the components that are accessing or changing the values."})]}}),`
`,n(e.h2,{id:"path-syntax-flexibility",get children(){return n(e.a,{className:"heading",href:"#path-syntax-flexibility",children:"Path syntax flexibility"})}}),`
`,n(e.p,{children:`Modifying a store using this method is referred to as "path syntax."
In this approach, the initial arguments are used to specify the keys that lead to the target value you want to modify, while the last argument provides the new value.`}),`
`,n(e.p,{children:`String keys are used to precisely target particular values with path syntax.
By specifying these exact key names, you can directly retrieve the targeted information.
However, path syntax goes beyond string keys and offers more versatility when accessing targeted values.`}),`
`,n(e.p,{children:`Instead of employing the use of just string keys, there is the option of using an array of keys.
This method grants you the ability to select multiple properties within the store, facilitating accessed to nested structures.
Alternatively, you can use filtering functions to access keys based on dynamic conditions or specific rules.`}),`
`,n(l,{href:"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=M6Y55ScNFDD_2HmRd4OJkQ",preview:"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=M6Y55ScNFDD_2HmRd4OJkQ&type=embed"}),`
`,n(e.p,{children:"The flexibility in path syntax makes for efficient navigation, retrieval, and modification of data in your store, regardless of the store's complexity or the requirement for dynamic access scenarios within your application."}),`
`,n(e.h2,{id:"modifying-values-in-arrays",get children(){return n(e.a,{className:"heading",href:"#modifying-values-in-arrays",children:"Modifying values in arrays"})}}),`
`,n(e.p,{children:`Path syntax provides a convenient way to modify arrays, making it easier to access and update their elements.
Instead of relying on discovering individual indices, path syntax introduces several powerful techniques for array manipulation.`}),`
`,n(e.h3,{id:"appending-new-values",get children(){return n(e.a,{className:"heading",href:"#appending-new-values",children:"Appending new values"})}}),`
`,n(e.p,{get children(){return[`To append a new element to an array within a store, you specify the target array and set the index to the desired position.
For example, if you wanted to append the new element to the end of the array, you would set the index to `,n(e.code,{children:"array.length"}),":"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"otherUsers"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ["})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"otherUsers"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"id"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"username"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"michael584"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"location"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Nigeria"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"loggedIn"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"false"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:"}"}),n(e.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"])"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// can become"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"store"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"users"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"length"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"id"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"username"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"michael584"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"location"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Nigeria"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"loggedIn"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"false"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore("users", (otherUsers) => [ ...otherUsers, { id: 3, username: "michael584", location: "Nigeria", loggedIn: false, },])// can becomesetStore("users", store.users.length, { id: 3, username: "michael584", location: "Nigeria", loggedIn: false,})',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h3,{id:"range-specification",get children(){return n(e.a,{className:"heading",href:"#range-specification",children:"Range specification"})}}),`
`,n(e.p,{children:`With path syntax, you can target a subset of elements to update or modify by specifying a range of indices.
You can do this using an array of values:`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ["}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"]"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"loggedIn"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"false"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore("users", [1, 3], "loggedIn", false)',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(r,{get children(){return[n(e.p,{get children(){return["If your ",n(e.em,{children:"store"})," is array, you can specify a range of indices using an object with ",n(e.code,{children:"from"})," and ",n(e.code,{children:"to"})," keys."]}}),n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"from"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"to"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"store"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#1669BB"},children:"length"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:"}"}),n(e.span,{style:{"--0":"#212121"},children:","})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"loggedIn"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"false"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore({ from: 1, to: store.length }, "loggedIn", false)',get children(){return n(e.div,{})}})}})]}})}}),n(e.p,{get children(){return["In addition to this, including the ",n(e.code,{children:"by"}),` key, can help you perform iterative updates within an array, which can be useful when you want to update elements at regular intervals.
This key defines the step size for index increments, similar to a `,n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for",get children(){return[n(e.code,{children:"for"})," loop"]}}),":"]}}),n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"from"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"to"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"store"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"length"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"by"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"2"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:"}"}),n(e.span,{style:{"--0":"#212121"},children:","})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"loggedIn"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"false"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore({ from: 0, to: store.length, by: 2 }, "loggedIn", false)',get children(){return n(e.div,{})}})}})]}})}})]}}),`
`,n(e.h3,{id:"dynamic-value-assignment",get children(){return n(e.a,{className:"heading",href:"#dynamic-value-assignment",children:"Dynamic value assignment"})}}),`
`,n(e.p,{children:`Path syntax also provides a way to set values within an array using functions instead of static values.
These functions receive the old value as an argument, allowing you to compute the new value based on the existing one.
This dynamic approach is particularly useful for complex transformations.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"loggedIn"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"!"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"loggedIn)"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore("users", 3, (loggedIn) => !loggedIn)',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h3,{id:"filtering-values",get children(){return n(e.a,{className:"heading",href:"#filtering-values",children:"Filtering values"})}}),`
`,n(e.p,{children:`In scenarios where you want to update elements in an array based on a specific condition, you can pass a function as an argument.
This function will act as a filter, allowing you to select elements that satisfy the condition.
It receives the old value and index as arguments, providing the flexibility to make conditional updates.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"user"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"user"})]}}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"username"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"startsWith"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"t"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"loggedIn"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"false"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["In addition to ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith",get children(){return n(e.code,{children:".startsWith"})}}),", you can use other array methods like ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find",get children(){return n(e.code,{children:".find"})}})," to filter for the values that you need."]}}),`
`,n(e.h2,{id:"modifying-objects",get children(){return n(e.a,{className:"heading",href:"#modifying-objects",children:"Modifying objects"})}}),`
`,n(e.p,{children:`When using store setters to modify objects, if a new value is an object, it will be shallow merged with the existing value.
What this refers to is that the properties of the existing object will be combined with the properties of the "new" object you are setting, updating any overlapping properties with the values from the new object.`}),`
`,n(e.p,{get children(){return["What this means, is that you can directly make the change to the store ",n(e.em,{children:"without"})," spreading out properties of the existing user object."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"id"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"109"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// is equivalent to"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"user"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"user"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"id"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"69420"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"))"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'setStore("users", 0, { id: 109,})// is equivalent tosetStore("users", 1, (user) => ({ ...user, id: 69420,}))',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h2,{id:"store-utilities",get children(){return n(e.a,{className:"heading",href:"#store-utilities",children:"Store utilities"})}}),`
`,n(e.h3,{id:"store-updates-with-produce",get children(){return n(e.a,{className:"heading",href:"#store-updates-with-produce",get children(){return["Store updates with ",n(e.code,{children:"produce"})]}})}}),`
`,n(e.p,{get children(){return["Rather than directly modifying a store with setters, Solid has the ",n(e.code,{children:"produce"}),` utility.
This utility provides a way to work with data as if it were a `,n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Mutable",children:"mutable"}),` JavaScript object.
`,n(e.code,{children:"produce"})," also provides a way to make changes to multiple properties at the same time which eliminates the need for multiple setter calls."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"produce"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js/store"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// without produce"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"username"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"newUsername"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"location"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"newLocation"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// with produce"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"users"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"produce"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"user"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"user"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"username"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"newUsername"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"user"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"location"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"newLocation"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { produce } from "solid-js/store"// without producesetStore("users", 0, "username", "newUsername")setStore("users", 0, "location", "newLocation")// with producesetStore( "users", 0, produce((user) => { user.username = "newUsername" user.location = "newLocation" }))',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return[n(e.code,{children:"produce"})," and ",n(e.code,{children:"setStore"}),` do have distinct functionalities.
While both can be used to modify the state, the key distinction lies in how they handle data.
`,n(e.code,{children:"produce"})," allows you to work with a temporary draft of the state, apply the changes, then produce a new ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Immutable",children:"immutable"}),` version of the store.
Comparatively, `,n(e.code,{children:"setStore"})," provides a more straightforward way to update the store directly, without creating a new version."]}}),`
`,n(e.p,{get children(){return["It's important to note, however, ",n(e.code,{children:"produce"})," is specifically designed to work with ",n(e.strong,{children:"arrays"})," and ",n(e.strong,{children:"objects"}),`.
Other collection types, such as JavaScript `,n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set",children:"Sets"})," and ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map",children:"Maps"}),", are not compatible with this utility."]}}),`
`,n(e.h3,{id:"data-integration-with-reconcile",get children(){return n(e.a,{className:"heading",href:"#data-integration-with-reconcile",get children(){return["Data integration with ",n(e.code,{children:"reconcile"})]}})}}),`
`,n(e.p,{get children(){return["When new information needs to be merged into an existing store ",n(e.code,{children:"reconcile"}),` can be useful.
`,n(e.code,{children:"reconcile"})," will determine the differences between new and existing data and initiate updates only when there are ",n(e.em,{children:"changed"})," values, thereby avoiding unnecessary updates."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"createStore"})]}}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"reconcile"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:' from "solid-js/stores"'})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"data"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setData"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"animals"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ["}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"cat"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"dog"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"bird"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"gorilla"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"]"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"newData"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"getNewData"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"() "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala']"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setData"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"animals"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"reconcile"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"(newData))"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":`const { createStore, reconcile } from "solid-js/stores"const [data, setData] = createStore({ animals: ['cat', 'dog', 'bird', 'gorilla']})const newData = getNewData() // eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala']setData('animals', reconcile(newData))`,get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return[`In this example, the store will look for the differences between the existing and incoming data sets.
Consequently, only `,n(e.code,{children:"'koala'"})," - the new edition - will cause an update."]}}),`
`,n(e.h3,{id:"extracting-raw-data-with-unwrap",get children(){return n(e.a,{className:"heading",href:"#extracting-raw-data-with-unwrap",get children(){return["Extracting raw data with ",n(e.code,{children:"unwrap"})]}})}}),`
`,n(e.p,{get children(){return["When there is a need for dealing with data outside of a reactive context, the ",n(e.code,{children:"unwrap"})," utility offers a way to transform a store to a standard ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object",children:"object"}),`.
This conversion serves several important purposes.`]}}),`
`,n(e.p,{get children(){return[`Firstly, it provides a snapshot of the current state without the processing overhead associated with reactivity.
This can be useful in situations where an unaltered, non-reactive view of the data is needed.
Additionally, `,n(e.code,{children:"unwrap"}),` provides a means to interface with third-party libraries or tools that anticipate regular JavaScript objects.
This utility acts as a bridge to facilitate smooth integrations with external components and simplifies the incorporation of stores into various applications and workflows.`]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createStore"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"unwrap"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js/store"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"data"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setData"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"animals"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ["}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"cat"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"dog"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"bird"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"gorilla"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"]"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"rawData"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"unwrap"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"(data)"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createStore, unwrap } from "solid-js/store"const [data, setData] = createStore({ animals: ["cat", "dog", "bird", "gorilla"],})const rawData = unwrap(data)',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["To learn more about how to use Stores in practice, visit the ",n(e.a,{href:"/guides/complex-state-management",children:"guide on complex state management"}),"."]}})]}function h(s={}){const{wrapper:e}=Object.assign({},a(),s.components);return e?n(e,c(s,{get children(){return n(t,s)}})):t(s)}function i(s,e){throw new Error("Expected component `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}export{h as default};