Redux Alternative [closed]

Question

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.

I am wondering why something like this is not done:

//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) => {
            listener.callback(eventObject.payload)
        })
    }
}
export default EventPropagator

To use: components simply registerListener and fireEvent:

//main.js
import EventPropagator from './events/EventPropagator'

EventPropagator.registerListener({
    "eventType": "carry_coconut",
    "callback": (payload) => {
        // actually carry coconut
        this.setState({"swallow_type": payload.swallow})
        console.log(payload)
    }
})
EventPropagator.fireEvent({
    "eventType": "carry_coconut",
    "payload": { "swallow": "african" }
})

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?

Answer 1

You should try mobX

mobX is a state management library which took the advantage of decorators and succeeded in removing unwanted code. For example, there is no concept of reducers in mobx.

Hope this helps!

Answer 2

There is Reactn based in hooks.
It is orders of magnitude easier to use, compared to Redux. Check https://www.npmjs.com/package/reactn and read Stover's blog.

Answer 3

Redux is a continuation of React's declarative programming Style. A simple way of mapping your application logic to components is to use something like Backbone.React.Component but using redux, will let you use all the tooling & middle-ware. Also have indefinite transitions in your apps makes debugging a lot easier. Now, I agree that you need a lot of wiring & boilerplate to get anyway.

If you want to use redux, you could look at something like redux-auto

Redux-auto: Redux made easy (with a plug and play approach)

Removing the boilerplate code in setting up a store & actions. why? This utility to allow you to get up and running with Rudux in a fraction of the time!

You can see now a redux-auto: helloworld project