Typing large action function extractions

[bbugh]

Hi! 👋 I have some actions that are getting very long that I would like to extract to a function. Unfortunately, I cannot find a way to properly type this (or a useful equivalent) to send to the extracted function so that it can be updated.

I could create new actions that are called by the main actions, but they should be module-level private and not able to be externally called. Unfortunately, this function is rather complex, so returning state changes is not reasonable in this situation.

What types do when your store logic starts getting out of hand and it needs to be extracted for simplicity?

For example:

export const useStore = defineStore({
  actions: {
    doSomeLongAction(info: Something) { 
      if (this.x) { 
        longFunction(this, info)
      } else {
        anotherLongFunction(this, info)
      } 
    }
  }
})
    
function longFunction(store: ???, info: Something) {

}

What is this/store type and/or what can be extracted instead in order to modify the state?

[posva]

You should be able to do:

function longFunction(store: ReturnType<typeof useStore>, info: Something) {

}

Note you can also split into smaller actions.

[bbugh]

Oh duh, thanks!

[philippedasilva-orizone]

I believe a lot of people will end up asking for this kind of tip: maybe it could be added somewhere in the documentation?

[posva]

Yeah, I noted that down for the TS cookbook entry. You probably need to type the return type of the extracted function if you return its call in an action BTW:

 export const useStore = defineStore({
  state: () => ({ count: 2 }),

  actions: {
    doSomeLongAction(info: Something) { 
	  // must be cast to avoid type errors because `this` is different from `useStore()`
      // and this is necessary to avoid circular dependencies
      return ongFunction(this as any)
    }
  }
})
    
function longFunction(store: ReturnType<typeof useStore>): number {
	return store.count
}

I would personally just add smaller actions BTW.

I added a dts test to show other possible circular problems. Note this is expected behavior in TS: https://github.com/posva/pinia/blob/v2/test-dts/actions.test-d.ts