Redux Alternative

Question

我最近开始学习React,我很快就遇到了一个充满功能和状态的膨胀父组件的问题.起初我看了Flux,然后我看了Redux,但两者看起来都像是咄咄逼人的解决方案.

我想知道为什么这样的事情没有做到:

//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

使用:组件简单registerListener和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" }
})

这将允许很多解耦和状态可以很容易地传递这种事件.这种方法的缺点是什么？

Answer 1

您应该尝试mobX

mobX是一个状态管理库，该库利用了装饰器的优势并成功删除了不需要的代码。例如，没有reducersmobx的概念。

希望这可以帮助！