3

在我的 React 应用程序中，我需要存储一些几乎可以在任何地方访问的数据，但不想将其保存在全局（即静态）数据结构中，以便轻松模拟我的单元测试和时尚指南。

我的意思是例如：

  • 浏览器构建和 Node.js 中IN_BROWSER的常量。truefalse
  • IS_MOBILE在浏览器启动时初始化的常量
  • 当前登录用户的数据，
  • 我连接到的 API 的 url（它是 localhost、登台服务器或生产，取决于配置）

现在我有一个名为sessionData.js存储这些数据的文件，每当我需要时，我都会require('./sessionData')在我的代码中使用它。我可以使用它来模拟我的单元测试，rewire并且当它们按顺序运行时，它现在可以正常工作。这对样式指南来说是有问题的，因为每个示例都可以从不同用户的角度显示视图（因此理想情况下，每个示例都有自己的sessionData）。

IN_BROWSER目前是 a global，这也是一个坏主意，因为它对每个模块的初始化代码都有隐式依赖。

我看到我可以sessionData通过道具将我的和其他的东西传递给层次结构中的每个组件，但这似乎有很多冗余。

有没有更好的设计模式来解决它？

4

4 回答 4

1

如果我的理解正确，为什么不通过 props 将数据结构传递到所有可能需要它的组件中呢？显然你不能通过 props 修改它，但在该数据结构中，你总是可以包含一个回调函数来更新它，结构如下：

structure = {
  dataItem1: stuff,
  dataItem2: stuff2,
  dataItemCallback: { var foo = stuff here; }
}

然后你可以这样称呼它：

this.props.structure.dataItem1;
this.props.structure.dataItem2;

要更新您可以随时调用的内容：

this.props.structure.dataItemCallback(newData);

此外，如果你通过 props 传递它，现在如果结构中的任何内容发生变化，所有组件都可以重新呈现。

于 2015-11-18T14:46:32.690 回答
1

我使用 Webpack，有一个插件DefinePlugin可以帮我处理这个问题。我想这是一个很好的做法，因为它是我放置大部分应用程序配置细节的地方。

例如，我的 webpack 配置有：

new webpack.DefinePlugin({
  'process.env': {'NODE_ENV': JSON.stringify(options.env)}
}),

所以我可以process.env.NODE_ENV像在后端一样在前端使用。

我在这里开源了我的 webpack 配置：https ://github.com/agenor/react-webpack-sample/blob/master/webpack.config.js

这是插件文档的链接

对于单元测试，我使用一个test-helper.js定义一些全局变量的类，并且在每次测试开始时都需要它。我不确定这是否是一个好习惯，但它对我们的项目来说效果很好。我们在没有 webpack 的情况下运行我们的测试。也许更好的做法是为处理其中一些全局变量的测试提供特定的 webpack 配置。

于 2015-11-16T14:22:01.203 回答
0

看起来反应context是要走的路。

不幸的是，API 目前不稳定，例如React.withContext在 0.13-alpha 中被弃用，文档说 API 将来会改变，但似乎这样的上下文不会被弃用。

于 2015-11-18T11:53:34.150 回答
0

在某些情况下，可以重构组件以直接传递所需的数据，而不是将其置于全局状态。这并不能解决问题，但可以显着减少问题。这是Dan Abramov 的一个很好的解释：

在此处输入图像描述

于 2015-11-23T10:19:55.467 回答