How to use the overmind.debounce function in overmind

filter,
  forEach,
} from 'overmind'
import { Todo } from './state'

type ChangeEvent = React.ChangeEvent

let nextTodoId = 0

export const changeNewTodoTitle: Operator = pipe(
  map(({ value }) => value.target.value),
  mutate(({ state, value }) => (state.newTodoTitle = value)),
  map(() => ['foo', 'bar', 'baz']),
  forEach(run(() => {})),
  filter(() => true),
  debounce(200)
)

/*
export const changeNewTodoTitle: Action = ({
  value: event,
  state,
}) => {
  state.newTodoTitle = event.target.value
}
*/

export const addTodo: Action = ({ state }) => {
  state.todos.unshift({
    id: String(nextTodoId++),
    title: state.newTodoTitle,
    completed: false,

})
}

export const closeSearch: Action = ({ state }) => {
  state.showSearchResult = false
  state.query = ''
}

export const changeQuery: Operator = pipe(
  mutate(({ state }, query) => {
    state.query = query
    state.showSearchResult = query.length > 2
    state.isLoadingSearchResult = query.length > 2
  }),
  filter((_, query) => query.length >= 3),
  debounce(200),
  mutate(async ({ state, effects }, query) => {
    state.searchResult = await effects.request('/backend/search?query=' + query)
    state.isLoadingSearchResult = false
  })
)

export const viewHelpGotIt: Action = ({ state }) => {
  state.showViewHelp = false
}

effects.storage.get(`${appName}.actionQueryPayload`),
    effects.storage.get(`${appName}.currentTab`),
  ]).then(([selectedActionQuery, actionQueryPayload, tab]) => {
    const actionQuery =
      selectedActionQuery && actions.includes(selectedActionQuery)
        ? selectedActionQuery
        : ''
    state.apps[appName].selectedActionQuery = actionQuery
    state.apps[appName].actionQueryPayload = actionQuery
      ? actionQueryPayload
      : ''
    state.currentTab = tab || state.currentTab
  })

export const updateActionsSplitSize: Operator = pipe(
  debounce(200),
  mutate(async ({ state, effects }, size) => {
    state.actionsSplitSize = size

    await effects.storage.set('devtool.actionsSplitSize', size)
  })
)

export const updateChartsSplitSize: Operator = pipe(
  debounce(200),
  mutate(async ({ state, effects }, size) => {
    state.chartsSplitSize = size

    await effects.storage.set('devtool.chartsSplitSize', size)
  })
)