typescript-fsa redux approach

actions.ts

/**
 * Recipe Editor Local Actions
 */

import actionCreatorFactory from 'typescript-fsa';

const actionCreator = actionCreatorFactory('@@local/RecipeEditor');

export const showAddGroupDialog = actionCreator('SHOW_ADD_GROUP_DIALOG');

export const closeAddGroupDialog = actionCreator('CLOSE_ADD_GROUP_DIALOG');

export const addGroup = actionCreator<{name: string}>('ADD_GROUP');

export const openProductSelector
  = actionCreator<{groupIndex: number}>('OPEN_PRODUCT_SELECTOR');

export const closeProductSelector = actionCreator('CLOSE_PRODUCT_SELECTOR');

export const startIngGroupSort = actionCreator('START_ING_GROUP_SORT');

export const endIngGroupSort = actionCreator('END_ING_GROUP_SORT');

export const startIngredientSort = actionCreator('START_INGREDIENT_SORT');

export const endIngredientSort = actionCreator('END_INGREDIENT_SORT');

store.ts

import { Reducer } from 'redux';
import { isType } from 'typescript-fsa';
import * as actions from './actions';

/**
 * Recipe Editor Local Store
 */

export interface LocalState {
  // if the food selector opened and which ingredient group it points to
  addIngredientToGroupIndex: number;
  isAddGroupDialogVisible: boolean;
  isSortingIngGroups: boolean;
  isSortingIngredients: boolean;
}

export const initialState: LocalState = {
  addIngredientToGroupIndex: -1,
  isAddGroupDialogVisible: false,
  isSortingIngGroups: false,
  isSortingIngredients: false,
};

export const localReducer: Reducer<LocalState> = (state, action) => {
  if (isType(action, actions.showAddGroupDialog)) {
    return {
      ...state,
      isAddGroupDialogVisible: true,
    };
  } else if (isType(action, actions.closeAddGroupDialog)) {
    return {
      ...state,
      isAddGroupDialogVisible: false,
    };
  } else if (isType(action, actions.openProductSelector)) {
    return {
      ...state,
      addIngredientToGroupIndex: action.payload.groupIndex,
    };
  } else if (isType(action, actions.closeProductSelector)) {
    return {
      ...state,
      addIngredientToGroupIndex: -1,
    };
  } else if (isType(action, actions.startIngGroupSort)) {
    return {
      ...state,
      isSortingIngGroups: true,
    };
  } else if (isType(action, actions.endIngGroupSort)) {
    return {
      ...state,
      isSortingIngGroups: false,
    };
  } else if (isType(action, actions.startIngredientSort)) {
    return {
      ...state,
      isSortingIngredients: true,
    };
  } else if (isType(action, actions.endIngredientSort)) {
    return {
      ...state,
      isSortingIngredients: false,
    };
  } else {
    return state;
  }
};