如何将应用程序设置传递给存储答案

【问题标题】：How to pass application settings to store如何将应用程序设置传递给存储
【发布时间】：2016-08-07 06:17:09
【问题描述】：

在干净的 React 应用程序设计方面，我确定如何将应用程序设置传递给不属于组件树的模块。

例如我连接到 REST API，因此需要将主机名传播到组件，但也传播到商店 - 我正在使用 Reflux。

将设置传递给组件可以通过上下文轻松实现，但由于商店不是其中的一部分，那么最干净的方法是什么？

到目前为止，我考虑了以下方法：

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

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

【问题讨论】：

标签： reactjs refluxjs

【解决方案1】：

在大多数情况下，您不应保留应用程序设置。

您应该将您的应用程序视为某种接收状态作为参数并返回视图的函数。应用程序状态的变化（通常）会导致结果视图的变化。助焊剂商店是您保持这种状态的方式。 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 的设置（例如延迟显示弹出窗口；如果我们考虑根据用户的操作更改此延迟，则该示例可能会更好）您应该创建 @987654323 @store 并像使用常规通量存储一样使用它（订阅更改，随操作更改等等）。

【讨论】：

感谢您的意见！我同意配置不应该是一个状态。但是按照函数式编程的想法，我想将配置注入到 store 中，而不是让它从一些外部上下文中导入，这会导致无法测试。因此我认为依赖注入将是最好的选择。