Reapex docs
  • Install
  • Tutorial 1: Get Started
  • Tutorial 2: Handle Side Effects
    • Side Effects with throttle
    • Side Effects with debounce
    • Side Effects with takeLeading
  • Tutorial 3: Advanced Usage - Application Flow Orchestration with Saga
  • Tutorial 4: Cross-Model Communication - Subscriptions
Powered by GitBook
On this page

Was this helpful?

  1. Tutorial 2: Handle Side Effects

Side Effects with debounce

PreviousSide Effects with throttleNextSide Effects with takeLeading

Last updated 4 years ago

Was this helpful?

throttle maybe still a bit too much, probably we just want to make the remote request only after the user stops typing.

We can optimize this by running a debounce effect on setUsername mutation which only calls the validateUsername function after the user stops typing for a period of time.

userModel.effects({
  setUsername: {
    async debounce({ payload }: ReturnType<typeof mutations.setUsername>) {
      const [username] = payload
      const valid = await validateUsername(username)
      mutations.setValid(valid)
    },
    ms: 1000,
  }
})

In the above example, we configured a side effect for setUsername mutation that only will be run after the user stops typing for 1000ms.

See the full example

here