Я признаю, что дебаты для Redux VS. Flux был урегулирован, и нет смысла в системе так тривиально, как Eventemitter. Но, работая с реагированием и Redux более года, я нашел две вещи:
- Redux трудно обернуть голову для новичка.
- Со всеми сложными вещами, которые могут быть достигнуты с помощью Redux, иногда это может быть слишком много.
В моей компании мы должны разработать несколько небольших модульных веб-порталов. Итак, мы придумали простой шаблон только ради этого.
Примечание: Я не пробовал это с большими сложными приложениями. Так будет предупреждено!
Так, как это работает??
Для отсутствия лучшего примера я решил использовать приложение TODO для демонстрации.
Вот обычный способ реализации Todo: https://jsfiddle.net/mokanArangan/ups7z2s4/
Затем я добавил свой единственный клиент:
/**
* Defines the abstract client
*/
import EventEmitter from 'eventemitter3';
import _ from 'lodash';
export default class BaseClient {
/**
* Initiate the event emitter
*/
constructor() {
this.eventEmitter = new EventEmitter();
}
/**
* Adds the @listener function to the end of the listeners array
* for the event named @eventName
* Will ensure that only one time the listener added for the event
*
* @param {string} eventName
* @param {function} listener
*/
on(eventName, listener) {
this.eventEmitter.on(eventName, listener);
}
/**
* Will temove the specified @listener from @eventname list
*
* @param {string} eventName
* @param {function} listener
*/
removeEventListener(eventName, listener) {
this.eventEmitter.removeListener(eventName, listener);
}
/**
* Will emit the event on the evetn name with the @payload
* and if its an error set the @error value
*
* @param {string} event
* @param {object} payload
* @param {boolean} error
*/
emit(event, payload, error = false) {
this.eventEmitter.emit(event, payload, error);
}
/**
* Returns the event emitter
* Used for testing purpose and avoid using this during development
*/
getEventEmitter() {
return this.eventEmitter;
}
}
Комментарии, надеюсь, уже были добавлены. Теперь мы можем отделить два компонента и подключить теми только с событиями.
Добавьте прослушиватель на компонент Размонтировать и удалить их в размонтилении:
// Listen for event
componentWillMount() {
client.on('TODO_ADDED', this.addEvent);
}
//Remove listener
componentWillUnmount(){
client.removeListener('TODO_ADDED', this.addEvent);
}
Теперь вам не нужно передавать функцию addEvent в качестве опоры. https://jsfiddle.net/mokanArangan/ne0rt40f/
И вуаля, это сделано. Нет более грязных прохождений с помощью вложенных компонентов. Вместо этого у вас теперь простые модульные компоненты, которые легко поддерживать.
Таким образом, мы можем иметь несколько модульных компонентов, которые не нужно знать о других компонентах. Это не ракетная наука, и, надеюсь, этот учебник поможет вам построить простые приложения без особых хлопот.