Can not debounce action within other action in Vuex

Question

I'm trying to debounce anything within an Action, it gets swallowed in one way or another...

Take this (pseudo) code:

import { debounce } from "lodash";

const actions = {
  debounceSomeLogging ({ dispatch }, text) {
    console.log("Outside debounced function.");
    debounce(function() {
      console.log("Inside debounced function.");
      dispatch("doRealThing");
    }, 1000);
  },

  doRealThing({ commit }) {
    // Whatever
  }
}

When I call the action, I see the Outside debounced function, but I can not see the other logging and the other action does not get triggered.

Anyone have experience with this and can point me in the right direction?

Answer 1

This should definate work

import { debounce } from "lodash";

const actions = {
  debounceSomeLogging: debounce(({ dispatch }, text) => {
    console.log("Inside debounced function.");
    dispatch("doRealThing");
  }, 1000),

  doRealThing({ commit }) {
    // Whatever
  }
}

Answer 2

As nemesv pointed out in a comment, the debounce function does not call the inner function. So you need to call the debounce again, like so:

debounce(function() {
  console.log("Inside debounced function.");
  dispatch("doRealThing");
}, 1000)();

So, in short, it should look like this:

debounce(...)() instead of like this debounce(...).