如何将应用程序设置传递到商店

时间:2016-04-15 10:14:40

标签: reactjs refluxjs

就清洁反应应用程序设计而言,我确信如何将应用程序设置传递给不属于组件树的模块。

E.g。我连接到REST API,因此需要将主机名传播到组件,还需要传播到商店 - 我使用Reflux。

将设置传递给组件可以通过上下文轻松实现,但由于商店不属于它,所以最干净的方式是什么?

到目前为止,我考虑了这些方法:

  • 将设置从组件传递到操作,以及我在每个商店监听器上接收的设置。
  • 使用一些在我的index.js中初始化的DI容器,可以在我的商店中使用

两者似乎都不适合我。任何提示赞赏!

1 个答案:

答案 0 :(得分:1)

在大多数情况下,您不应将应用程序设置保留在商店中。

您应该将您的应用程序视为某种接收状态作为参数并返回视图的函数。应用程序状态的更改(通常)会导致生成的视图发生更改。 Flux商店是您保持这种状态的方式。 API主机名不是您希望影响您的应用程序的东西。它只是您的应用程序需要知道才能正常工作的信息有效负载(比如配置,而不是设置)。所以,你应该把它作为信息有效载荷。模块,类,全局变量,某种DI,你可以考虑任何你认为有用的东西。

我通常使用所有配置创建单独的模块导出对象。类似的东西:

const config = {
  api: {
    hostname: 'localhost',
    port: 3000
  }
  // ...
};

export default config;

然后只需导入它。类似的东西:

import config from "../config";

const api = new API(config.api); // just for example

但是,如果你真的需要使用某种可能会影响UI的设置(例如延迟显示弹出窗口;如果我们考虑更改此延迟取决于用户的操作,那么示例可能更好)你应该创建Settings存储并使用它,就像使用常规的flux存储一样(订阅更改,更改操作等)。