Правильно ли я понял суть Flux?

Question

[d-virt]

Здравствуйте.

На сколько я понимаю, flux работает по следующему принципу: view подписывается на изменения данных в sotre, если данные store изменились, то перерисовываем view.
Ниже привожу простенький пример, без использование event libs and flux libs (эдогта мой смешно-никчемный flux =) ).
Уточните, пожалуйста, верно ли я понимаю саму идеи подхода flux?

"use strict";

import React from 'react';
import ReactDOM from 'react-dom';

var myEvent = new Event('myEvent');

class Store {
    constructor() {
        this.data = 'data';
    }
    getData() {
        return this.data;
    }
    setData(value){
        this.data = value;
        //Уведомляем, что состояние store изменилось
        document.dispatchEvent(myEvent);
    }
}

// Создаем хранилище
var StoreApp = new Store();

var HelloWorld = React.createClass({
    getInitialState : function () {

        var self = this;

        //подписываемся на изменения состояние store
        document.addEventListener('myEvent', function () {
            self.setState({
                data : StoreApp.getData()
            });
        });

        return {
            data : StoreApp.getData()
        };
    },
    render: function() {
        return (
            React.DOM.h1({}, this.state.data)
        );
    }
});

ReactDOM.render(<HelloWorld/>, document.getElementById('test'));

setTimeout(function () {
    // изменить состояние store
    StoreApp.setData(124124);
}, 2000);

Comments

[d-virt]

Артём Петренков: Увы, с ES6 и JSX столкнулся только сейчас и в данном случае только разбираюсь. Если покажите, как должно быть в ES6 и JSX, то большое Вам спасибо!

[d-virt]

Артём Петренков: Уточните, пожалуйста, что такое - React.DOM.h1 стрелочные функции? Спасибо!

[copal]

class StoreEvent {
    static CHANGE = "string";
}

class Store {
    constructor(){
        this.value = null;
        this.dispatcher = new EventEmetter(); // вы можете использовать любой другой
    }

    getValue(){
        return this.value;
    }
    setValue(value){
        this.value = value;

        this.dispatcher.emit(StoreEvent.CHANGE);
    }
}

class SomeComponent extends Component {
    state = {}

    componentWillMount() {
        this.props.store.on(StoreEvent.CHANGE, this.store_changeHandler);
    }

    store_changeHandler = ()=> {
        this.setState({...})
    }
}

[d-virt]

copal: Большое Вам спасибо за пояснение! Но на данный момент я специально отошел от event libs. Что бы не усложнять суть вопроса.

[d-virt]

copal: Простите, пожалуйста, еще кое-какие пояснения для себя. Я Вас правильно понимаю, что: this.props.store = тут храним объект new Store() ?
Спасибо!

[copal]

d-virt: да

[d-virt]

copal: Большое Вам ЧЕЛОВЕЧЕСКОЕ СПАСИБО, за уделенное время и ответы на мои нудные вопросы! Увы это дорогого стоит!

Answer 1

[Максим]

Комментарии есть, а ответа нет =) исправим?

На сколько я понимаю, flux работает по следующему принципу: view подписывается на изменения данных в sotre, если данные store изменились, то перерисовываем view

Все верно поняли. Осталось лишь добавить, что изменения в store попадают с помощью ACTIONS - так называемых действий.

p.s. из личного опыта - мне больше понравился redux, основное отличие которого от Flux - объект store всего лишь один! Внес свой вклад материалы на русском здесь.