How to use the overmind.pipe function in overmind

const selectionArray = selection.split('_')
  const view = selectionArray[0]
  const typescript = String(Boolean(selectionArray[1]))

  effects.router.redirectWithQuery(effects.router.getPath(), {
    view,
    typescript,
  })
}

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
}

export const submitQueryAction: Action = ({ state, effects }) => {
  if (!state.currentApp.actionQuerySuggestion) {
    return
  }

  state.currentApp.selectedActionQuery = state.currentApp.actionQuerySuggestion
  state.currentApp.isQueryingAction = false
  state.currentApp.actionQueryPayload = ''

  effects.storage.set(
    `${state.currentApp.name}.selectedActionQuery`,
    state.currentApp.selectedActionQuery
  )
}

export const executeAction: Operator = pipe(
  mutate(({ state, effects }) => {
    state.isExecutingAction = true

    const payload = state.currentApp.actionQueryPayload

    if (payload && !isValidJson(payload)) {
      return
    }

    effects.connector.sendMessage(state.currentApp.name, 'executeAction', {
      name: state.currentApp.selectedActionQuery,
      payload: state.currentApp.actionQueryPayload,
    })
  }),
  wait(500),
  mutate(({ state, effects }) => {

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)
  })
)

export const clearActions: Action = ({ state }) => {
  state.currentApp.actionsList = []
  state.currentApp.currentActionId = null
}

export const selectChart: Action = ({ state }, id) => {
  state.currentApp.currentChartId = id
}

AsyncAction,
  mutate,
  debounce,
  wait,
} from 'overmind'
import {
  Message,
  Tab,
  ExecutionType,
  ActionsListItemType,
  Component,
} from './types'
import * as o from './operators'
import { isValidJson, createApp, getActionId } from './utils'

export const onMessage: Operator = pipe(
  o.ensureCurrentApp(),
  o.ensureApp(),
  o.addClientMessage(),
  o.getMessage(),
  o.forkMessage({
    [ExecutionType.INIT]: o.addStateAndActions(),
    [ExecutionType.RE_INIT]: o.addStateAndActions(),
    [ExecutionType.FLUSH]: o.addFlush(),
    [ExecutionType.DERIVED]: o.updateDerived(),
    [ExecutionType.MUTATIONS]: o.addMutations(),
    [ExecutionType.EFFECT]: o.updateEffect(),
    [ExecutionType.STATE]: o.updateState(),
    [ExecutionType.COMPONENT_ADD]: o.addComponent(),
    [ExecutionType.COMPONENT_UPDATE]: o.updateComponent(),
    [ExecutionType.COMPONENT_REMOVE]: o.removeComponent(),
    [ExecutionType.DERIVED_DIRTY]: o.updateFlushWithDerived(),

Object.assign(sandbox, {
    modules: sandbox.modules.map(module => ({
      ...module,
      code: state.editor.currentSandbox.modules.find(
        currentSandboxModule => currentSandboxModule.shortid === module.shortid
      ).code,
    })),
  });

  Object.assign(state.editor.sandboxes[state.editor.currentId], sandbox);
  state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);

  effects.live.sendModuleStateSyncRequest();
};

export const liveMessageReceived: Operator = pipe(
  filter((_, payload) =>
    Object.values(LiveMessageEvent).includes(payload.event)
  ),
  fork((_, payload) => payload.event, {
    [LiveMessageEvent.JOIN]: liveMessage.onJoin,
    [LiveMessageEvent.MODULE_STATE]: liveMessage.onModuleState,
    [LiveMessageEvent.USER_ENTERED]: liveMessage.onUserEntered,
    [LiveMessageEvent.USER_LEFT]: liveMessage.onUserLeft,
    [LiveMessageEvent.MODULE_SAVED]: liveMessage.onModuleSaved,
    [LiveMessageEvent.MODULE_CREATED]: liveMessage.onModuleCreated,
    [LiveMessageEvent.MODULE_MASS_CREATED]: liveMessage.onModuleMassCreated,
    [LiveMessageEvent.MODULE_UPDATED]: liveMessage.onModuleUpdated,
    [LiveMessageEvent.MODULE_DELETED]: liveMessage.onModuleDeleted,
    [LiveMessageEvent.DIRECTORY_CREATED]: liveMessage.onDirectoryCreated,
    [LiveMessageEvent.DIRECTORY_UPDATED]: liveMessage.onDirectoryUpdated,
    [LiveMessageEvent.DIRECTORY_DELETED]: liveMessage.onDirectoryDeleted,

effects.storage.get(`${appName}.selectedActionQuery`),
    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)
  })
)

mutate,
  when,
  run,
  wait,
  fork,
  debounce,
  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
}
*/