Create multiple events from one event definition? about redux-beacon

[ttmarek]

Ah I see. You want to create multiple events based on information in your actions. You aren't the first to ask for this. The eventSchema property is problematic. We added the eventSchema property to validate events returned by eventFields. If eventFields is augmented to return multiple event definitions then the eventSchema property isn't too useful unless every event has a similar shape.

I'm going to have to think on this, and maybe rethink whether or not we even need eventSchema. I've only seen eventSchema being used to suppress events from being pushed to a target, but that can also be achieved by returning a null from eventFields. eventSchema also doesn't add any value to TypeScript or Flow users.

If we were to get rid of eventSchema an event definition could be a function instead of an object:

// Event Definition
const pageView = (action): PageView => ({
    hitType: 'pageview',
    page: action.payload,
});

// Event Definitions Map
const eventsMap = {
  LOCATION_CHANGE: pageView,
}

And your example would look like:

dispatch(setFiltersAction({
  foo: 1,
  bar: 2,
  xyz: 3,
}))

const filtersChange =  (action) => {
    const events = [];
    Object.entries(action.data).forEach(([key, value]) => {
      events.push({
        hitType: 'event',
        eventCategory: 'filters',
        eventAction: 'set',
        eventLabel: key,
        eventValue: value,
      })
    });
    return events;
};

const eventsMap = {
  SET_FILTERS: filtersChange,
};

This could be done in a non-breaking way. That is, we could support both forms of event definitions (object and function) until we're ready to deprecate the object syntax.

Thoughts @bertrandk?

[coluccini]

Great! I'm not sure when I'll be able to do it (I'm now fighting with some more prioritary issues), but I'll try t do it the soonest possible.
Enjoy your traveling!

[ttmarek]

Hi @coluccini. Great question. Yes! You can do that, sort of. You can provide an array of event definitions when mapping to an action. Here's how it would look with your example:

dispatch(setFiltersAction({
  foo: 1,
  bar: 2,
}));

const filter1 = {
  eventFields: action => ({
      hitType: 'event',
      eventCategory: 'filters',
      eventAction: 'set',
      eventLabel: 'foo',
      eventValue: action.data.foo,
  });
};

const filter2 = {
  eventFields: action => ({
      hitType: 'event',
      eventCategory: 'filters',
      eventAction: 'set',
      eventLabel: 'bar',
      eventValue: action.data.bar,
  });
};

const eventsMap = {
  SET_FILTERS: [filter1, filter2],
};

https://rangle.github.io/redux-beacon/docs/api/event-definitions-map.html

[coluccini]

Oh, nice. But I was thinking in a more dynamic scenario. Somethings like this (asume that you don't know how many values you are changing on the dispatch):

dispatch(setFiltersAction({
  foo: 1,
  bar: 2,
  xyz: 3,
}))

const filtersChange = {
  eventFields: action => {
    const events = [];
    Object.entries(action.data).forEach(([key, value]) => {
      events.push({
        hitType: 'event',
        eventCategory: 'filters',
        eventAction: 'set',
        eventLabel: key,
        eventValue: value,
      })
    });
    return events;
  )
  },
};

const eventsMap = {
  SET_FILTERS: filtersChange,
};

Do you think this makes sense? If so, I can try to submit a PR with the changes

[coluccini]

I'm not sure if removing eventSchema is completely necessary. I mean, eventSchema is optional. So you can just use it if does make sense in each definition. But yes, if eventDefinition is a function instead of an object you can achieve what eventSchema does programmatically.

[ttmarek]

Sorry for the late reply @coluccini, I'm doing a bit of travelling at the moment.
You're right, removing eventSchema isn't necessary for the moment. I will accept a PR adding the functionality to return an array of events from eventFields. Let me know if you'll have time to work on it.

If so, here's what I'm thinking will need to be changed.

1. create-events.test.js
   - Add a test: event definition returns an array of events.
   - Add a test: event definition returns an array of events with some failing the eventSchema.
2. create-events.js
   - Make the two tests pass.
3. event-definition.md
   - Add a Notes section and mention that you can return an array of events from eventFields.

[ttmarek]

Fixed by #103