How to use typesafe-actions - 10 common examples

notifications: (state = { results: [], refreshing: false }, action) => {
    switch (action.type) {
      case getType(actions.refreshNotificationsStart):
        return { ...state, refreshing: true }
      case getType(actions.refreshNotificationsSuccess): {
        // Add it to our list for display
        const { results } = action.payload
        return { ...state, results, refreshing: false }
      }
      case getType(actions.refreshNotificationsFailure):
        return { ...state, refreshing: false }
      case getType(actions.newNotificationRequest): {
        // Useful so that new notifications you receive while staring at the Feed will just pop in
        const results = state.results.slice(0, 99)
        results.unshift(action.payload.notification)
        return { ...state, results }
      }
      default:
        return state
    }
  },

import { createAction } from 'typesafe-actions';
import { GraphNode, Label, UpdateLabel, UpdateGraphNode } from './types';

// Add Node
export const requestAddNode = createAction('GRAPH_REQUEST_ADD_NODE');
export const successAddNode = createAction('GRAPH_ADD_NODE', (node: GraphNode) => ({
  type: 'GRAPH_ADD_NODE',
  payload: node,
}));
export const failureAddNode = createAction('GRAPH_FAILURE_ADD_NODE', (error: string) => ({
  type: 'GRAPH_FAILURE_ADD_NODE',
  payload: error,
}));

export const requestRemoveNode = createAction('GRAPH_REQUEST_REMOVE_NODE', (node: GraphNode) => ({
  type: 'GRAPH_REQUEST_REMOVE_NODE',
  payload: node
}));
export const successRemoveNode = createAction('GRAPH_REMOVE_NODE', (node: GraphNode) => ({
  type: 'GRAPH_REMOVE_NODE',
  payload: node,
}));
export const failureRemoveNode = createAction('GRAPH_FAILURE_REMOVE_NODE', (error: string) => ({
  type: 'GRAPH_FAILURE_REMOVE_NODE',
  payload: error,
}));

import { RootState } from './Types'

const actions = {
  onboardingSuccess: createAction('ONBOARDING_SUCCESS', resolve => {
    return () => resolve()
  }),
  toggleVerboseUi: createAction('TOGGLE_VERBOSE_UI', resolve => {
    return () => resolve()
  }),
  completeTourSuccess: createAction('COMPLETE_TOUR_SUCCESS', resolve => {
    return (tourKey: TourScreens) => resolve({ tourKey })
  }),
  toggleServicesRequest: createAction('TOGGLE_SERVICES_REQUEST', resolve => {
    return (name: ServiceType, status?: boolean) => resolve({ name, status })
  }),
  toggleStorageRequest: createAction('TOGGLE_STORAGE_REQUEST', resolve => {
    return (name: StorageType, status?: boolean) => resolve({ name, status })
  }),
  updateViewSetting: createAction('TOGGLE_VIEW_SETTING', resolve => {
    return (name: string, value: string) => resolve({ name, value })
  }),
  // Verbose UI options
  toggleNodeStateNotifications: createAction(
    'TOGGLE_NODE_STATE_NOTIFICATIONS',
    resolve => {
      return () => resolve()
    }
  ),
  toggleNodeStateOverlay: createAction('TOGGLE_NODE_STATE_OVERLAY', resolve => {
    return () => resolve()
  }),
  toggleNodeErrorNotifications: createAction(

"app/TOGGLE_SHOW_HIDDEN_BOOKMARK"
  )(),
  setQuery: createStandardAction("app/SET_QUERY")(),

  // Bookmark actions
  retrieveBookmarks: createStandardAction("bookmark/RETRIEVE_BOOKMARK")(),
  retrieveBookmarksSuccess: createStandardAction(
    "bookmark/RETRIEVE_BOOKMARK_SUCCESS"
  )<{
    foldersById: { [id: string]: ChromeBookmark };
    bookmarksById: { [id: string]: ChromeBookmark };
  }>(),
  hideBookmark: createStandardAction("bookmarks/HIDE_BOOKMARK")(),
  showBookmark: createStandardAction("bookmarks/SHOW_BOOKMARK")(),
  hideFolder: createStandardAction("bookmarks/HIDE_FOLDER")(),
  showFolder: createStandardAction("bookmarks/SHOW_FOLDER")(),

  // Theme actions
  goToNextTheme: createStandardAction("theme/GO_TO_NEXT_THEME")(),

  // Other
  rehydrate: createStandardAction("other/REHYDRATE_REQUEST")(),
  rehydrateSuccess: createStandardAction("other/REHYDRATE_SUCCESS")<
    ReduxPersistedState
  >()
};

export const update = createStandardAction('inventory/UPDATE')<{
  stores: DimStore[];
  buckets?: InventoryBuckets;
  newItems?: Set;
  profileResponse?: DestinyProfileResponse;
}>();

/**
 * Set the bucket info.
 */
export const setBuckets = createStandardAction('inventory/SET_BUCKETS')();

/**
 * Move an item from one store to another.
 */
export const moveItem = createStandardAction('inventory/MOVE_ITEM')<{
  item: DimItem;
  source: DimStore;
  target: DimStore;
  equip: boolean;
  amount: number;
}>();

// TODO: tags/notes should probably be their own part of state
export const setTag = createStandardAction('inventory/SET_TAG')<{
  itemId: string;
  tag: string;
}>();

/** Update the set of new items. */
export const setNewItems = createStandardAction('new_items/SET')>();

import { ReduxPersistedState } from "./../types/ReduxPersistedState";
import { createStandardAction } from "typesafe-actions";

export const actions = {
  // Game actions
  startGame: createStandardAction("game/START_GAME")(),
  startNewRound: createStandardAction("game/START_NEW_ROUND")(),
  play: createStandardAction("game/PLAY")(),
  showInterlude: createStandardAction("game/SHOW_INTERLUDE")(),
  endGame: createStandardAction("game/END_GAME")<{ score: number }>(),
  showResult: createStandardAction("game/SHOW_RESULT")(),
  tap: createStandardAction("game/TAP")(),
  timerTick: createStandardAction("game/TIMER_TICK")(),

  // Router actions
  navigateToPlayground: createStandardAction("router/NAVIGATE_TO_PLAYGROUND")(),
  navigateToMenu: createStandardAction("router/NAVIGATE_TO_MENU")(),

  // Other generic actions
  rehydrate: createStandardAction("app/REHYDRATE_REQUEST")(),
  rehydrateSuccess: createStandardAction("app/REHYDRATE_SUCCESS")<
    ReduxPersistedState
  >()
};

import { DestinyProfileResponse } from 'bungie-api-ts/destiny2';

/**
 * Reflect the old stores service data into the Redux store as a migration aid.
 */
export const update = createStandardAction('inventory/UPDATE')<{
  stores: DimStore[];
  buckets?: InventoryBuckets;
  newItems?: Set;
  profileResponse?: DestinyProfileResponse;
}>();

/**
 * Set the bucket info.
 */
export const setBuckets = createStandardAction('inventory/SET_BUCKETS')();

/**
 * Move an item from one store to another.
 */
export const moveItem = createStandardAction('inventory/MOVE_ITEM')<{
  item: DimItem;
  source: DimStore;
  target: DimStore;
  equip: boolean;
  amount: number;
}>();

// TODO: tags/notes should probably be their own part of state
export const setTag = createStandardAction('inventory/SET_TAG')<{
  itemId: string;
  tag: string;

createAsyncAction,
  getType,
  createStandardAction
} from "typesafe-actions";
import * as firebase from "firebase";
import { withPrefix } from "store/utils";
import { eventChannel } from "redux-saga";
import { call, take, put, fork } from "redux-saga/effects";

export const loadUsers = createAsyncAction(
  withPrefix("LOAD_USERS_REQUEST"),
  withPrefix("LOAD_USERS_SUCCESS"),
  withPrefix("LOAD_USERS_FAILURE")
)();

export const updateCurrentUser = createStandardAction(
  withPrefix("UPDATE_CURRENT_USER")
)();

/**
 * state = {
 *   me // currentUser
 *   users // other users -> 50 of them will be stored
 * }
 */
export const reducer = (state = {}, action) => {
  switch (action.type) {
    case getType(updateCurrentUser): {
      return {
        ...state,
        me: action.payload
      };

// Action Creators allow us to create typesafe utilities for dispatching actions
import { ActionType, createAction, createStandardAction } from 'typesafe-actions';
import { GraphType } from '../types/Graph';
import { EdgeLabelMode } from '../types/GraphFilter';
import { ActionKeys } from './ActionKeys';

export const GraphFilterActions = {
  setEdgelLabelMode: createStandardAction(ActionKeys.GRAPH_FILTER_SET_EDGE_LABEL_MODE)(),
  setFindValue: createStandardAction(ActionKeys.GRAPH_FILTER_SET_FIND_VALUE)(),
  setGraphType: createStandardAction(ActionKeys.GRAPH_FILTER_SET_GRAPH_TYPE)(),
  setHideValue: createStandardAction(ActionKeys.GRAPH_FILTER_SET_HIDE_VALUE)(),
  setShowUnusedNodes: createStandardAction(ActionKeys.GRAPH_FILTER_SET_SHOW_UNUSED_NODES)(),
  // Toggle actions
  showGraphFilters: createStandardAction(ActionKeys.ENABLE_GRAPH_FILTERS)(),
  toggleCompressOnHide: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_COMPRESS_ON_HIDE),
  toggleGraphNodeLabel: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_GRAPH_NODE_LABEL),
  toggleLegend: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_LEGEND),
  toggleGraphVirtualServices: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_GRAPH_VIRTUAL_SERVICES),
  toggleGraphCircuitBreakers: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_GRAPH_CIRCUIT_BREAKERS),
  toggleGraphMissingSidecars: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_GRAPH_MISSING_SIDECARS),
  toggleGraphSecurity: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_GRAPH_SECURITY),
  toggleFindHelp: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_FIND_HELP),
  toggleServiceNodes: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_SERVICE_NODES),
  toggleTrafficAnimation: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_TRAFFIC_ANIMATION),
  toggleUnusedNodes: createAction(ActionKeys.GRAPH_FILTER_TOGGLE_UNUSED_NODES)
};

import { createStandardAction as action, createAsyncAction as asyncAction } from 'typesafe-actions'
import { Perspective, Item, Route } from './types'
import { Dispatch } from 'redux';

// TODO export every action separatelly and then import all
const setEntriesOrdering = action('editor/SET_ENTRIES_ORDERING')()
const setEntriesLevels = action('editor/SET_ENTRIES_LEVELS')()
const addItem = action('editor/ADD_ITEM')()
const deleteItems = action('editor/DELETE_ITEMS')()
const changeItems = action('editor/CHANGE_ITEMS')()

const focusItem = action('editor/FOCUS_ITEM')<{ entryId: string }>()
const repeatLastAction = action('editor/REPEAT_LAST_ACTION')()
const scheduleNextUpdate = action('editor/SCHEDULE_NEXT_UPDATE')()
const addActionToQueue = action('editor/ADD_ACTION_TO_QUEUE')()
const openItem = action('editor/OPEN_ITEM')()
const onIndexChange = action('editor/ON_INDEX_CHANGE')()
const activateNextRoute = action('editor/ACTIVATE_NEXT_ROUTE')()
const onFocusedItemChange = action('editor/ON_FOCUSED_ITEM_CHANGE')<{ route: Route, position: number, item: Item}>()

export default {
  onFocusedItemChange,
  activateNextRoute,
  onIndexChange,
  openItem,
  addActionToQueue,
  scheduleNextUpdate,
  focusItem,
  changeItems,