$onAction not always firing?

[mixmix]

Reproduction

https://stackblitz.com/edit/github-cktvx5-g4kkro?file=src/stores/index.js

Steps to reproduce the bug

Setup:

• quasar 2.7.3 with vite
• vue 3.2.37
• pinia 2.0.14

I'm writing an undo-redo plugin, and it is semi working. My approach is subscribing to actions, then recording those. The problem is that only some actions seem to "heard"... and worse still it's intermittent 😢

Plugin code so far, any advice most appreciated:

export default store((/* { ssrContext } */) => {
  const pinia = createPinia()

  // add Pinia plugins
  pinia.use(history)

  return pinia
})

const TIMETRAVEL = 'timetravel'
function history ({ store, options }) {
  if (!options.history) return

  const past = reactive([])
  const future = reactive([])

  store.$onAction(action => {
    // do not record timetravel actions
    if (isTimetravel(action)) return

    past.push({ name: action.name, payload: action.args })
    while (future.length) future.pop()
  })

  const replay = () => {
    store.$reset()
    past.forEach(action => store[action.name](...action.payload, TIMETRAVEL))
  }

  return {
    past,
    canUndo: computed(() => past.length > 0),
    canRedo: computed(() => future.length > 0),
    undo () {
      const action = past.pop()
      future.push(action)

      replay()
    },
    redo () {
      const action = future.pop()
      past.push(action)

      replay()
    }
  }
}

function isTimetravel (action) {
  return action.args[action.args.length - 1] === TIMETRAVEL
}

Expected behavior

the $onAction callback should fire ever time, on all actions for stores which "turn on" history

Actual behavior

When I try to use this history plugin in a store, I see one action triggering onAction almost always, and one almost never

import { defineStore } from 'pinia'

export const useNetworkDataStore = defineStore('network/data', {
  state: () => ({
    seedNodes: {
      // nodeId: data..
    },
    directedLinks: {
      // A: { B: true }
    }
  }),
  getters: {
    // ...
  },
  actions: {
    addNode (node) {
      // this one is always heard
    },

    addDirectedLinks (links) {
      // this one is almost never heard
    }
  },

  history: true
  // WARNING - records and replays *actions*
  // DO NOT put side-effects in actions, otherwise these will all be replayed!
})

Additional information

No response

[mixmix]

@posva is this not a possible bug?
I did make a repo trying to make a simple plugin to demo the problem I'm seeing with $onAction

If I misread the docs and used the plugin system wrong that would be great (ie no bug).
Can you clarify if that's the case?

[guyaumetremblay]

@mixmix I know this is an old bug / discussion but did you find the cause? I got the same thing but different... I have 2 plugins, each one subscribing to $onAction and each one doing a simple console.log of the name... but sometime, only one of both is loging !

[posva]

I completely missed this 👀

The problem in the repro is that no action is being called. It works when calling the actions.

A limitation you might have encountered is that $onAction() cannot be aware of actions invoked by other actions in setup stores. This is a technical limitation that needs some investigation but should be resolved in a new major. @guyaumetremblay I recommend you to try and boil it down in the playground to see if it's a bug

FYI: issues are moved to discussions when they don't follow the reporting guidelines (instructions in "new issue" page). In your case, I can't remember anymore but it was probably that this is just a usage question with an editable example not a bug report.

[guyaumetremblay]

Hi @posva and thanks for your reply.
I think that my situation is different. I'll try to create a small repro but here is a more detailed but simplified explanation:

• Take a component with a button calling a pinia action.
• Add 2 plugins, each using $onAction() to log in the console the name of the action.

In my case, only one of both plugins is printing the log! I don't know why a limitation would affect one plugin but not the second?

[guyaumetremblay]

Nevermind, I just found my issue... Don't know if it's something missing in the documentation.
I just understand that a plugin is installed for each store ! So, if you have 2 stores, the install function will be called twice; not only once with the root store but twice with each store.
My second plugin was having a guard, to install it only once so it was not listening the actions of the second store.

[posva]

Ah yeah, you can use guards but they should be for each plugin 😄
Each plugin is independent so I would say this makes sense without any extra documentation

[posva]

An update on this: I plan on adding added an action helper to setup stores that allows users to mark functions as actions:

defineStore('id', ({ action }) => {
  const n = ref(0)
  const increment = action((amount = 1) => n.value += amount)
  const decrement = action((amount) => increment(-amount))
  return { n, increment }
})

With the setup above, calling store.decrement(1) will trigger $onAction() callbacks twice: one for decrement and one for increment.

This approach is opt-in, everything will work the same without it. It feels a bit clunky but it's not invasive and really simple without the need of a build tool. Feedback welcome of course

[ddenev]

@posva , I just found this post since I had the same problem - calling an action in the same store and expecting this to fire $onAction in another store (subscribee) but it did not work.

So my questions are:

• since I cannot find this (the action helper) in the documentation, is this a public API now and will it be documented?
• is this the only use case for action - to be able to call an action in the same store and trigger subscriptions? If so, do we need it, since we always can do useSameStore().myAction() and this seems to work.
• can you add this 'quirk' to the docs as well - it took me couple of hours to actually find the reason why my subscriptions were not called 🙂

[stavrosdro]

Regarding the current situation when I want to call an action from the same store and want to trigger $onAction for both of them, can I follow the approach that I did here ? Is it safe?