【发布时间】：2017-03-23 21:56:43
【问题描述】：
我最近开始学习 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" }
})
这将允许大量的解耦，并且可以通过此类事件轻松传递状态。这种方法有什么缺点？
【问题讨论】：
-
Jumpstate 看起来不错 github.com/jumpsuit/jumpstate.
-
这种方法可以解决跨组件通信的问题，但是你仍然需要在本地管理每个组件数据，在
state。除了 action 和 reducer，redux 也有帮助，所以你不必考虑本地状态，以及如何在（可能很多）组件之间保持同步。 -
你可以试试rootzjs.org
标签： javascript events reactjs redux