// This is how I would traditionally do it
export const selector = 'toasts'

export const actionTypes = {
  ADD: `${selector}/ADD`,
  SHOW: `${selector}/SHOW`,
  HIDE: `${selector}/HIDE`,
}

export const reducer = (state = {}, action) => {
  switch (action.type) {
    case SHOW: {
      return {
        ...state,
        [action.id]: {
          message: action.message,
        }
      }
    }
    case HIDE: {
      const newState: State = { ...state }
      delete newState[action.id]
      return newState
    }
    default:
      return state
  }
}

export const actions = {
  add: ({ message }) => ({
    type: ADD,
    message,
  }),
  show: ({ id, message }) => ({
    type: SHOW,
    id,
    message,
  }),
  hide: ({ id }) => ({
    type: HIDE,
    id,
  }),
}

export const selectors = {
  get: ({ state }) => state[selector]
}