title: Redux Alternative
body: <p>I have recently started learning React and I quickly encountered the problem of a bloated parent component full of functions and state. At first I looked at Flux and then I looked at Redux but both seemed like really overbearing solutions.</p>
  
  <p>I am wondering why something like this is not done:</p>
  
  <pre class="lang-js prettyprint-override"><code>//EventPropagator.js
  let EventPropagator = {
      registerListener(listenerObject){
          if (this.listeners == null)
              this.listeners = []
          this.listeners.push(listenerObject)
      },
      fireEvent(eventObject){
          let listenerList = this.listeners.filter(function(listener){
              return listener.eventType === eventObject.eventType
          })
          listenerList.forEach((listener) =&gt; {
              listener.callback(eventObject.payload)
          })
      }
  }
  export default EventPropagator
  </code></pre>
  
  <p><strong>To use:</strong> components simply <code>registerListener</code> and <code>fireEvent</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>//main.js
  import EventPropagator from './events/EventPropagator'
  
  EventPropagator.registerListener({
      "eventType": "carry_coconut",
      "callback": (payload) =&gt; {
          // actually carry coconut
          this.setState({"swallow_type": payload.swallow})
          console.log(payload)
      }
  })
  EventPropagator.fireEvent({
      "eventType": "carry_coconut",
      "payload": { "swallow": "african" }
  })
  </code></pre>
  
  <p>This would allow a lot of decoupling and state could easily be passed around with this sort of event. What are the downsides to this approach?</p>