actions.ts

import { Recipe, Grocery } from "./model";
import { createStandardAction, createAsyncAction } from 'typesafe-actions';

const ADD_RECIPE = '[RECIPE] Add';
const UPDATE_RECIPE = '[Recipe] Update';
const SET_ACTIVE_RECIPE = '[RECIPE] Set Active Recipe';
const UNSET_ACTIVE_RECIPE = '[Recipe] Unset Active Recipe';
const FETCH_RECIPE_REQUEST = '[Recipe] Fetch Recipe Request';
const FETCH_RECIPE_SUCCESS = '[Recipe] Fetch Recipe Sucess';
const FETCH_RECIPE_FAILURE = '[Recipe] Fetch Recipe Failure';
const FETCH_RECIPES_REQUEST = '[Recipe] Fetch Recipes Request';
const FETCH_RECIPES_SUCCESS = '[Recipe] Fetch Recipes Success';
const FETCH_RECIPES_FAILURE = '[Recipe] Fetch RecipeS Failure';
const UPDATE_RECIPE_REQUEST = '[Recipe] Update Recipe Request';
const UPDATE_RECIPE_SUCCESS = '[Recipe] Update Recipe Success';
const UPDATE_RECIPE_FAILURE = '[Recipe] Update Recipe Failure';
const CREATE_RECIPE_REQUEST = '[Recipe] Create Recipe Request';
const CREATE_RECIPE_SUCCESS = '[Recipe] Create Recipe Success';
const CREATE_RECIPE_FAILURE = '[Recipe] Create Recipe Failure';
const SUBMIT_RECIPE_CHOICES_REQUEST = '[Recipe] Submit Recipe Choices Request';
const SUBMIT_RECIPE_CHOICES_SUCCESS = '[Recipe] Submit Recipe Choices Success';
const SUBMIT_RECIPE_CHOICES_FAILURE = '[Recipe] Submit Recipe Choices Failure';
const ADD_GROCERY_LIST = '[Recipe] Add Grocery List';



export const add = createStandardAction(ADD_RECIPE)<Recipe>();
export const update = createStandardAction(UPDATE_RECIPE)<Recipe>();

export const submitRecipeChoices = createAsyncAction(
  SUBMIT_RECIPE_CHOICES_REQUEST,
  SUBMIT_RECIPE_CHOICES_SUCCESS,
  SUBMIT_RECIPE_CHOICES_FAILURE
)<string[], Grocery[], Error>();

export const fetchRecipe = createAsyncAction(
  FETCH_RECIPE_REQUEST,
  FETCH_RECIPE_SUCCESS,
  FETCH_RECIPE_FAILURE
)<string, Recipe, Error>();

export const updateRecipe = createAsyncAction(
  UPDATE_RECIPE_REQUEST,
  UPDATE_RECIPE_SUCCESS,
  UPDATE_RECIPE_FAILURE
)<Recipe, Recipe, Error>();

export const createRecipe = createAsyncAction(
  CREATE_RECIPE_REQUEST,
  CREATE_RECIPE_SUCCESS,
  CREATE_RECIPE_FAILURE
)<Recipe, Recipe, Error>();

export const fetchRecipes = createAsyncAction(
  FETCH_RECIPES_REQUEST,
  FETCH_RECIPES_SUCCESS,
  FETCH_RECIPES_FAILURE
)<void, Recipe[], Error>();

export const setActiveRecipe = createStandardAction(SET_ACTIVE_RECIPE)<string>();
export const unSetActiveRecipe = createStandardAction(UNSET_ACTIVE_RECIPE)<void>();
export const addGroceryList = createStandardAction(ADD_GROCERY_LIST)<Grocery[]>();

reducer.ts

import { Recipe, Grocery } from "./model";
import { ActionType, getType } from 'typesafe-actions';
import * as actions from './actions';
import { combineReducers } from 'redux';

export type RecipeState = {
  readonly recipes: Recipe[];
  readonly activeRecipe: string;
  readonly isFetchingRecipes: boolean;
  readonly groceries: Grocery[];
}

export type RecipeAction = ActionType<typeof actions>;

export default combineReducers<RecipeState, RecipeAction>({
  recipes: (state = [], action) => {
    switch (action.type) {
      case getType(actions.add):
        const newRecipe: Recipe = action.payload;
        const localRecipe = state.find(recipe => recipe.id === newRecipe.id);
        if (localRecipe) {
          state[state.indexOf(localRecipe)] = newRecipe;
          return state;
        } else {
          return [...state, newRecipe];
        }
      case getType(actions.update):
        const updatedRecipe: Recipe = action.payload;
        if (updatedRecipe.id === undefined) { return state };
        const stateRecipeIndex = state.findIndex(recipe => recipe.id === updatedRecipe.id)
        state[stateRecipeIndex] = updatedRecipe
      default:
        return state;
    }
  },
  activeRecipe: (state = '', action) => {
    switch (action.type) {
      case getType(actions.setActiveRecipe):
        return action.payload;
      case getType(actions.unSetActiveRecipe):
        return '';
      default:
        return state;
    }
  },
  isFetchingRecipes: (state = false, action) => {
    switch (action.type) {
      case getType(actions.fetchRecipe.request):
        return true;
      case getType(actions.fetchRecipe.success), getType(actions.fetchRecipe.failure):
        return false;
      default:
        return state;
    }
  },
  groceries: (state = [], action) => {
    switch (action.type) {
      case getType(actions.addGroceryList):
        return action.payload;
      default:
        return state;
    }
  }
})