Архитектура
React-приложений
Виртуальный DOM
Каждый раз, когда меняется состояние, Реакт строит новый виртуальный DOM для всего, что находится ниже в иерархии
Flux
- Основная идея Flux - односторонний поток данных.
- Actions диспетчатся во все Store, обрабатываются, и уже новые данные отправляются в React.
- В отличии от MVC, нам не важно, что именно изменилось - React всё равно посторит новый виртуальный DOM
- https://github.com/facebook/flux
- https://github.com/gaearon/redux
- http://fluxible.io
- https://github.com/spoike/refluxjs
- https://github.com/goatslacker/alt
- https://github.com/kenwheeler/mcfly
- https://github.com/acdlite/flummox
- https://github.com/LeanKit-Labs/lux.js
- https://github.com/azu/material-flux
- http://martyjs.org
- http://fluxxor.com
- http://deloreanjs.com
Реализации
Facebook Flux
Store
Простейший 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
Некоторые 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 попадают все события с диспетчера, он сам должен определить на какие реагировать, а какие игнорировать
Action Creators
Функции, котрые описывают действие.
function addItem(data) {
Dispatcher.dispatch({
type: ADD_ITEM,
data
})
}
Простейший AC абстрагирует от диспетчера
Хорошая практика: использовать для типов константы (в данном случае ADD_ITEM)
SPA with React(rus)
By Roman Iakobchuk
SPA with React(rus)
- 1,978