使用 websocket 反应 Flux 更新循环

Question

我有一个使用 react with flux 的应用程序和一个存储所有数据并在通过 websocket 发生更新时通知所有订阅者的网络服务器。

我的问题是，当我的组件触发一个动作时，新状态通过套接字发送到网络服务器，并发送到客户端浏览器的商店，但随后我的服务器将向所有订阅者发送一条消息，这是此组件的新状态，以便所有客户端都得到更新，但这会导致客户端发送状态已更改的新更新。这进入了一个无限循环，客户端发送到服务器，服务器响应所有订阅者的更新，因为这是一个更新，客户端再次将新状态发送到服务器...

utils/WebAPI:

var socket = new SockJS("http://localhost:8080/stomp");
var client = Stomp.over(socket);

module.exports = {

    sendUpdate: function(update){
        if(client.connected){
            client.send("/app/hello", {}, JSON.stringify(update));
        }
    },

    getUpdates: function() {
        client.connect({}, function() {
            client.subscribe("/topic/hello", function(message) {
                var data = JSON.parse(message.body);
                MyActions.updateState(data.id, data.update)
            });
        });
    }

};

MyActions:

var AppDispatcher = require('../dispatcher/AppDispatcher');
var FunctionConstants = require('../constants/FunctionConstants');

// Define actions object
var MyActions = {

    updateState: function(id, update) {
        AppDispatcher.handleAction({
            actionType: FunctionConstants.STATE_UPDATED,
            id: id,
            update: update
        })

    }

};

module.exports = MyActions;

更新功能在我的店铺:

var WebAPI = require('../utils/WebAPI');
var _ = require('underscore');

// Define initial data points
var _data = {};


function updateFunction(id, data) {

    _data[id] = data

    var update = "{\"actionType\": \"STATE_UPDATED\", \"id\": \""+id+"\", \"update\": "+JSON.stringify(data)+"}";
    WebAPI.sendUpdate(JSON.parse(update));
}

...

最后 我的组件:

let React = require('react');
var MyActions = require('../../../actions/MyActions');
var WebAPI = require('../../../utils/WebAPI');

//Subscribe for updates sent from server
WebAPI.getUpdates();

let FunctionComponent = React.createClass({

    newState: function(data){
        MyActions.updateState(this.props.id, data);
    },

    render() {
        var d = this.props.data;
        d.count++;
        return ( 
            <div>
                <h1>{this.props.id}</h1>
                <div>{this.props.data}</div>
                <button onClick={this.newState(d)}
            </div>
        )
    }
});

module.exports = FunctionComponent;

当我的组件调用任何操作并且服务器向所有订阅者发送更新时，如何解决导致无限循环的问题？

Answer 1

WebAPI.getUpdates();应该在商店里，而不是组件里。以下是使用回流的基本存储。剩下的看这个； Flux: waitFor specific event.

    import Reflux from 'reflux';

    import Actions from './Actions';
    import AddonStore from './Addon.Store';
    import MixinStoreObject from './Mixin.Store';

    let BasicStoreObject = {
        init() { this.listenTo(AddonStore, this.onAddonTrigger); },
        data1: {},
        listenables: Actions,
        mixins: [MixinStoreObject],
        onGotData1(data) { this.data1 = data; BasicStore.trigger('data1'); },
        onAddonTrigger() { BasicStore.trigger('data2'); },
        getData1() { return this.data1; },
        getData2() { return AddonStore.data2; },
        getData3() { return this.data3; }
    }
    const BasicStore = Reflux.createStore(BasicStoreObject);
    export default BasicStore;

使用 websocket 反应 Flux 更新循环

React Flux update loop with websocket

javascript

flux

websocket

reactjs

reactjs-flux