Каждый раз, когда меняется состояние, Реакт строит новый виртуальный DOM для всего, что находится ниже в иерархии
Простейший Store отвечает за работу с данными и оповещает про их изменения
class AbstractStore extends EventEmitter {
constructor() {
super()
this.__items = []
}
emitChange() {
this.emit(STORE_CHANGE_EVENT)
}
addChangeListener(callback) {
this.on(STORE_CHANGE_EVENT, callback)
}
removeChangeListener(callback) {
this.removeListener(STORE_CHANGE_EVENT, callback)
}
getAll() {
return this.__items
}
add(item) {
this.__items.push(item)
}
}
Некоторые Store должны реагировать на действия
class ItemStore extends AbstractStore {
constructor() {
super()
this.dispatchToken = Dispatcher.register((action) => {
const { data, type } = action
switch (type) {
case ADD_ITEM:
this.add(data)
this.emitChange()
break;
}
})
}
}
В такой Store попадают все события с диспетчера, он сам должен определить на какие реагировать, а какие игнорировать
Функции, котрые описывают действие.
function addItem(data) {
Dispatcher.dispatch({
type: ADD_ITEM,
data
})
}
Простейший AC абстрагирует от диспетчера
Хорошая практика: использовать для типов константы (в данном случае ADD_ITEM)