actions.js

// define action types... IDK why peeps do this
export const REPLACE_THINGS = "REPLACE_THINGS"
export const REMOVE_THING = "REMOVE_THING"
export const ADD_THING = "ADD_THING"
export const RESET_THINGS = "RESET_THINGS"

export const CLICKED_A_THING = "CLICKED_A_THING"
export const UI_THING_ON = "UI_THING_ON"
export const UI_THING_OFF = "UI_THING_OFF"

stuff.js

// define the first reducer
import {
  REPLACE_THINGS,
  REMOVE_THING,
  ADD_THING,
  RESET_THINGS,
  CLICKED_A_THING
} from "./actions"

export const thingsReducer = (state = [], { type, id, things, thing }) => {
  switch (type) {
    case REPLACE_THINGS:
      return things
    case REMOVE_THING:
      return state.filter(i => i.id !== id)
    case ADD_THING:
      return [...state, thing]
    case RESET_THINGS:
      return []
    case CLICKED_A_THING:
      return []
    default:
      return state
  }
}

uiThing.js

// define yhe second reducer

import { CLICKED_A_THING, UI_THING_ON, UI_THING_OFF } from "./actions"

export const uiThingReducer = (state = false, { type }) => { 
  switch (type) { 
    case UI_THING_ON:
      return true
    case UI_THING_OFF:
      return false  
    case CLICKED_A_THING: 
      return !state
    case RESET_THINGS:
      return false
    default:
      return state
  }
}