using the callback to <Show> and update store, results in whole store being set to new value

<Show when={'companyName' in formDataStore && formDataStore}>
{(currentDataStore) => {
return (
<Show when={'companyName' in formDataStore && formDataStore}>
{(currentDataStore) => {
return (
if I do this in form setFormDataStore({ companyDetails: { phoneNumber: e.currentTarget.value } }); then the only value in the store is as follows: causing other part to throw undefined errors
19 Replies
mdynnl
mdynnl3y ago
that's how setStore works, you want setStore("companyDetails", {...})
Braveheart
BraveheartOP3y ago
Braveheart
BraveheartOP3y ago
yeh , but in another case it wasn't doing that in a simpler app
mdynnl
mdynnl3y ago
repro
Braveheart
BraveheartOP3y ago
Braveheart
BraveheartOP3y ago
here i was awas updating address and the company name wasn't touched but what you say makes sense
mdynnl
mdynnl3y ago
setStore merges top level values
Braveheart
BraveheartOP3y ago
so much black box with stores, i can barely take it very hard for people to pick this up
mdynnl
mdynnl3y ago
when you do setStore({}) nothing happens but setStore({ a: {} }) replaces a completely with new objects
Braveheart
BraveheartOP3y ago
i see
mdynnl
mdynnl3y ago
it's a few things to keep in mind most of the times, you want to set values through path
Braveheart
BraveheartOP3y ago
path doesnt work in this case cause of the callback
mdynnl
mdynnl3y ago
wdym? it should work unless the value at the path doesn't exist yet and you want to set nested prop e.g createStore({})[1]("a", "b", 1) in such cases, produce or reconcile is better option
Braveheart
BraveheartOP3y ago
Braveheart
BraveheartOP3y ago
export const [formDataStore, setFormDataStore] = createStore<CompanyCaseDetails | {}>(); | {} to get round the types
mdynnl
mdynnl3y ago
basically this intermediate value doesn't exist yet
Braveheart
BraveheartOP3y ago
dont understand intermediate value ?
mdynnl
mdynnl3y ago
but you can setStore("companyDetails", { ... })
const [store, set] = createStore({})

// store is empty object
// store.a doesn't exist yet
// and you try to set its prop "b"
set("a", "b", 1)
const [store, set] = createStore({})

// store is empty object
// store.a doesn't exist yet
// and you try to set its prop "b"
set("a", "b", 1)
Braveheart
BraveheartOP3y ago
kinda chicken and egg issues using <CompanyCaseDetails | {}> gets around a lot of initial typing issues, but just gives you a bunch more afterwords ill just ts ignore fo rnow

Did you find this page helpful?