Question

这是用例：

我的reactjs应用程序中有2个组件。这两个组件都通过websockets提供来自远程服务器的数据。我不希望我的组件和商店知道数据源 - 所有websocket逻辑都驻留在ActionCrators中，我称之为SocketListeners。

以下是此类监听器的示例：

var listen = function (socket) {
  socket
    .on(Messages.LIGHTS_CHANGED, function (newConfiguration) {

      AppDispatcher.dispatch({
        type: LightActionTypes.SUBSTITUTE_LIGHT_CONFIGURATION,
        payload: newConfiguration
      });

    })      
};

module.exports = {
  listen: listen
};

因为它是一个websocket，我需要知道远程URL。我想让我的用户在我的主页上提供这个网址 - 在此之前，我的组件（实际上是路由）不应该可用，应该将用户重定向到他能够指定此URL的页面。 / p>

所以我需要看起来像登录流程的东西 - 但是远程网址不是登录名和密码，而是关键属性。

你将如何管理这种类似会话的状态？

我尝试过这样的事情：

在我的形式主视图中，我有一个功能：

handleConnectionConfirmed: function(event) {
    event.preventDefault();
    ActionCreator.saveRemoteUrl(
      this.state.remoteUrl
    );
  },

导致更新我的ConfigurationStore：

var _lightsUrl = '';
var _temperatureUrl = '';

var ConfigurationStore = {
  lightsSocketEndpoint: function () {
    return _lightsUrl;
  },

  temperatureSocketEndpoint: function () {
    return _temperatureUrl;
  }

};

然后我的两个组件都有：

componentWillMount: function () {
    ActionCreator.init();
  },

初始化功能：

init: function () {
    _socket = WebSocketFactory.lightsWebSocket();
    SocketListener.listen(_socket);
  },

最后一个片段：

lightsWebSocket: function () {
    return io.connect(
      ConfigurationStore.lightsSocketEndpoint()
    )
  },

问题是：我刷新任何页面后，当然我的ConfigurationStore会被清除。

如何在不使用外部存储的情况下使以某种方式持久化？

此外，您知道如何配置react-router，以便在没有指定远程URL并且用户尝试打开其中一个组件所在的站点时，它可以将我重定向到“登录”页面吗？

Answer 1

使用LocalStorage或SessionStorage。例如：

在商店的构造函数中执行：

_lightsUrl = localStorage.getItem('lightsUrl') || '';

在商店的调度处理程序中：

_lightsUrl = newLightsUrl;
localStorage.setItem('newLightsUrl');

这是一个很好的教程，以这种方式进行身份验证（不要介意＆＃39; Rails＆＃39;部分）：http://fancypixel.github.io/blog/2015/01/29/react-plus-flux-backed-by-rails-api-part-2/

ReactJS + flux - 如何处理类似会话的参数（伪授权）

1 个答案: