Архитектура 
React-приложений

Виртуальный DOM

Каждый раз, когда меняется состояние, Реакт строит новый виртуальный DOM для всего, что находится ниже в иерархии

Flux

  • Основная идея Flux - односторонний поток данных.
  • Actions диспетчатся во все Store, обрабатываются, и уже новые данные отправляются в React.
  • В отличии от MVC, нам не важно, что именно изменилось - React всё равно посторит новый виртуальный DOM

Реализации

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