D
D
d-virt2016-04-10 12:26:49
JavaScript
d-virt, 2016-04-10 12:26:49

Did I understand the essence of Flux correctly?

Hello.
As far as I understand, flux works according to the following principle: the view subscribes to data changes in sotre, if the store data has changed, then we redraw the view.
Below is a simple example, without the use of event libs and flux libs (this is my ridiculously useless flux =) ).
Please clarify if I understand the very ideas of the flux approach?

"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);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim, 2016-05-11
@d-virt

There are comments, but there is no answer =) will we fix it?
Everyone got it right. It remains only to add that changes to the store get through ACTIONS - the so-called actions.
ps from personal experience - I liked redux more , the main difference from Flux is that there is only one store object ! Contributed materials in Russian here .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question