Недавно я начал изучать 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" }
})
Это позволит много развязки, и состояние может быть легко передано с помощью такого рода событий. Каковы недостатки этого подхода?