How to use typescript-fsa - 10 common examples

function testIsType() {
  const withPayload = actionCreator<{foo: string}>('WITH_PAYLOAD');
  const withoutPayload = actionCreator('WITHOUT_PAYLOAD');

  if (isType(action, withPayload)) {
    const foo: string = action.payload.foo;

    // typings:expect-error
    action.payload.bar;
  }

  if (isType(action, withoutPayload)) {
    // typings:expect-error
    const foo: {} = action.payload;
  }
}

const reducer: Reducer = (state = defaultState, action) => {
  /*
   * Create Bucket
   **/

  // DONE
  if (isType(action, createBucketActions.done)) {
    const { result } = action.payload;
    return {
      ...state,
      data: [...state.data, result]
    };
  }

  /*
   * Get All Buckets
   **/

  // START
  if (isType(action, getAllBucketsActions.started)) {
    return onStart(state);
  }

}

  if (isType(action, actions.nav.collapseType)) {
    // This makes sure to also collapse any child nodes
    const expandedTypes = state.expandedTypes.filter((t) => !t.startsWith(action.payload.type))
    return {
      ...state,
      expandedTypes
    }
  }

  if (isType(action, actions.nav.search)) {
    return { ...state, query: action.payload.query }
  }

  if (isType(action, actions.nav.showTree)) {
    return { ...state, showTree: true }
  }

  if (isType(action, actions.nav.hideTree)) {
    return { ...state, showTree: false }
  }

  if (action.type === LOCATION_CHANGE) {
    const locationChangeAction = action as LocationChangeAction
    const match = matchPath(locationChangeAction.payload.pathname, { path: '/:fullName' })
    if (match) {
      const params = match.params
      if ('fullName' in params) {
        const typedParams = params as {fullName: string}
        const type = '.' + typedParams.fullName
        return makeSelected(type, state)

export default (state: INav = INITIAL_STATE, action: Action): INav => {
  if (isType(action, actions.nav.selectType)) {
    return makeSelected(action.payload.type, state)
  }

  if (isType(action, actions.nav.expandType)) {
    const newExpandedTypes = withParentTypes(action.payload.type)
    return { ...state, expandedTypes: state.expandedTypes.concat(newExpandedTypes) }
  }

  if (isType(action, actions.nav.collapseType)) {
    // This makes sure to also collapse any child nodes
    const expandedTypes = state.expandedTypes.filter((t) => !t.startsWith(action.payload.type))
    return {
      ...state,
      expandedTypes
    }
  }

if (isType(action, actions.nav.expandType)) {
    const newExpandedTypes = withParentTypes(action.payload.type)
    return { ...state, expandedTypes: state.expandedTypes.concat(newExpandedTypes) }
  }

  if (isType(action, actions.nav.collapseType)) {
    // This makes sure to also collapse any child nodes
    const expandedTypes = state.expandedTypes.filter((t) => !t.startsWith(action.payload.type))
    return {
      ...state,
      expandedTypes
    }
  }

  if (isType(action, actions.nav.search)) {
    return { ...state, query: action.payload.query }
  }

  if (isType(action, actions.nav.showTree)) {
    return { ...state, showTree: true }
  }

  if (isType(action, actions.nav.hideTree)) {
    return { ...state, showTree: false }
  }

  if (action.type === LOCATION_CHANGE) {
    const locationChangeAction = action as LocationChangeAction
    const match = matchPath(locationChangeAction.payload.pathname, { path: '/:fullName' })
    if (match) {
      const params = match.params

ctx.addEventListener("message", event => {
  if (isType(event.data, paid)) {
    const { amount } = event.data.payload;
    console.log(`Got paid ¥${amount}.`);

    ctx.postMessage(1);

    const id = (Math.random() * 10000).toFixed(0);
    const params = { id, message: "Thank you.", received: amount };
    ctx.postMessage(shipping.started(params));

    if (amount > 0) {
      const onionPrice = 80;
      const potatoPrice = 50;
      const onionAmount = Math.floor((Math.random() * amount) / onionPrice);
      const potatoAmount = Math.floor(
        (amount - onionPrice * onionAmount) / potatoPrice
      );

const reducer: Reducer = (state = defaultState, action) => {
  if (isType(action, getLinodeTypesActions.started)) {
    return {
      ...state,
      loading: true
    };
  }

  if (isType(action, getLinodeTypesActions.done)) {
    const { result } = action.payload;

    return {
      ...state,
      loading: false,
      lastUpdated: Date.now(),
      entities: result,
      results: result.map(t => t.id)
    };

const reducer: Reducer = (state = defaultState, action) => {
  if (isType(action, deleteLinodeActions.done)) {
    const {
      params: { linodeId }
    } = action.payload;

    const configIdsToRemove = Object.values(state.itemsById)
      .filter(({ linode_id }) => linode_id === linodeId)
      .map(({ id }) => String(id));

    return removeMany(configIdsToRemove, state);
  }

  if (isType(action, deleteLinode)) {
    const { payload } = action;

    const configIdsToRemove = Object.values(state.itemsById)
      .filter(({ linode_id }) => linode_id === payload)

const reducer: Reducer = (state = defaultState, action) => {
  if (isType(action, clustersRequestActions.started)) {
    return {
      ...state,
      loading: true
    };
  }

  if (isType(action, clustersRequestActions.done)) {
    const { result } = action.payload;

    return {
      ...state,
      loading: false,
      lastUpdated: Date.now(),
      entities: result,
      results: result.map(r => r.id),
      error: undefined

const reducer: Reducer = (state = defaultState, action) => {
  if (isType(action, getLinodeTypesActions.started)) {
    return {
      ...state,
      loading: true
    };
  }

  if (isType(action, getLinodeTypesActions.done)) {
    const { result } = action.payload;

    return {
      ...state,
      loading: false,
      lastUpdated: Date.now(),
      entities: result,
      results: result.map(t => t.id)
    };