events.js

// maybe we don't need to pass "click" as the first param, just passing in the config might be good enough
const handleClick = ReactDOM.createEvent("click", {
  // imperative stuff is defined with config
  preventDefault: true,
  stopPropagation: true,
  passive: false,
});

function reducer(e) {
  // do reducer stuff
}

class MyComponent extend React.Component {
  render() {
    // reducer is a function pulled out here, but can easily be an arrow function to access props/state
    return (
      <button onClick={handleClick(reducer)}>Click me</button>
    );
  }
}
                                         

Maybe ReactDOM.createEventHandler?

I still don't like that the event object is passed to the reducer. I would like it more if you had to specify a mapping function of event => payload (I know @sebmarkbage doesn't like this idea).