ui-reducer-example.ts

import {$call} from 'utility-types'; 
import {getType, createAction} from 'typesafe-actions';
import {ModalType} from './modals';
import {RootState} from '../reducers';

export interface State {
  readonly loading: boolean;
  readonly modals: ReadonlyArray<ModalType>;
}

const defState:State = {
  loading: true,
  modals: []
};

export function getLoading(state:RootState) {
  return state.ui.loading;
}

export function getModal(state:RootState) {
  const m = state.ui.modals;
  if (m.length > 0) {
    return m[m.length - 1];
  } else {
    return null;
  }
}

export const actions = {
  setLoading: createAction('UI_SET_LOADING', (loading: boolean) => ({
    type: 'UI_SET_LOADING',
    payload: loading
  })),
  showModal: createAction('UI_SHOW_MODAL', (modal:ModalType) => ({
    type: 'UI_SHOW_MODAL',
    payload: modal
  })),
  hideModal: createAction('UI_HIDE_MODAL', () => ({
    type: 'UI_HIDE_MODAL'
  }))
};

const returnsOfActions = Object.values(actions).map($call);
export type Action = typeof returnsOfActions[number];

export function reducer(state:State = defState, action:Action) {
  switch(action.type) {
    case getType(actions.setLoading):
      return {
        ...state, 
        loading: action.payload
      };
    case getType(actions.showModal):
      return {
        ...state,
        modals: state.modals.concat(action.payload)
      };
    case getType(actions.hideModal):
      return {
        ...state,
        modals: state.modals.slice(0, -1)
      };
    default:
      return state;
  }
}