Using nested store

[gabimoncha]

What's the best / recommended way of using the stan-js with nested states?

Let's say for example I'm building a habit tracker.
I have the entries store for each year:

export const {actions} = createStore({
  entries: {
      '2024': {
          '2024-10-29': {
              value: 10,
              details: 'Had a great run'
          }
      }
  ),
});


// I only tried updating it in an immutable way

// method A
actions.setEntries(prev => ({
    ...prev,
    '2024': {
        ...prev['2024'],
        '2024-10-30': {
              value: 0,
              details: "Couldn't run because I had to debug stan-js"
        }
    }
}))

// method B
actions.setEntries(prev => {
    prev['2024']['2024-10-31'] = {
        value: 0,
        details: "Still debugging"
    };
    return prev;
})

I haven't tried for arrays yet, but I liked zustand for his immer plugin. Do you have any plans to integrate it?

[Brentlok]

Hello @gabimoncha! 😊 Thank you for starting this interesting topic!

immer is a pure JavaScript library, so feel free to use it with stan-js, since "integration" is already here 😅. Here's some example code to illustrate:

type EntryPayload = {
    value: number
    details: string
}

const { useStore, actions } = createStore({
    entries: {
        '2024': {
            '2024-10-29': {
                value: 10,
                details: 'Had a great run',
            },
        },
    } as Record<string, Record<string, EntryPayload>>,
})

const updateEntry = (year: string, date: string, payload: EntryPayload) => {
    actions.setEntries(produce(draft => {
        draft[year][date] = payload
    }))
}

// Happy coding! 🚀

I hope this helps! Let me know if you have any more questions or thoughts. 🌟

[chertik77]

Hello @gabimoncha! 😊 Thank you for starting this interesting topic!

immer is a pure JavaScript library, so feel free to use it with stan-js, since "integration" is already here 😅. Here's some example code to illustrate:

type EntryPayload = {
    value: number
    details: string
}

const { useStore, actions } = createStore({
    entries: {
        '2024': {
            '2024-10-29': {
                value: 10,
                details: 'Had a great run',
            },
        },
    } as Record<string, Record<string, EntryPayload>>,
})

const updateEntry = (year: string, date: string, payload: EntryPayload) => {
    actions.setEntries(produce(draft => {
        draft[year][date] = payload
    }))
}

// Happy coding! 🚀

I hope this helps! Let me know if you have any more questions or thoughts. 🌟

Would be nice to have that built-in? It solves a lot of use cases, instead of importing produce over and over again, and almost every state manager has a immer 🙂

[Brentlok]

Would be nice to have that built-in? It solves a lot of use cases, instead of importing produce over and over again, and almost every state manager has a immer 🙂

As suggested in the above code, you can define and export helper functions that use Immer internally for updating the store. This approach eliminates the need to repeatedly import produce. Currently, we do not plan to add built-in Immer middleware