Question

在Redux中，我们可以使用props作为常量，并使用state作为全局变量。但是当我们需要一个全局常数时，我们必须使用什么？

以下是我可以考虑的选项。

只需使用状态，不要更改它。我们应该遵循“单一事实来源”的规则。
使用context。它可以是一个简单的解决方案，但正如官方的React主页所说，它是一个实验性功能，因此它可以使我的应用程序不稳定。
将所有全局变量收集到一个js文件中，并像js模块一样使用它。
从webpack配置文件中声明npm环境变量，并将它们用作全局常量。
其他方式

哪一个可以保证最合适的架构？你能告诉我原因吗？

Answer 1

我建议选项3。

原因：

可维护性 - 您只需更改此文件即可在所有使用此文件的模块中使用，因此修改非常简单。
可用性 - 由于它就像一个单独的模块，因此很容易导入和使用它。
调试 - 与其他选项相比，调试时不会有太多麻烦，因为模块中的所有内容都可以像我们首先编写的那样轻松访问。

Answer 2

我还建议选项3.

因为您可以在一个地方分离出全局常量，并且可以在不触及代码的情况下更改它们。只需要重建项目。

您可以使用webpack。方法很简单 -

在文件中定义全局常量，让我们说 constants.js 并导出它们。假设您要全局配置 API_KEY 常量

const API_KEYS= {
    production: JSON.stringify('prod-const'),
    development: JSON.stringify('dev-const'),
    test: JSON.stringify('test-const')
};

//基于您获得的节点env变量获得可用的环境设置

const environment = function () {
     switch(process.env.NODE_ENV) {
         case 'production':
             return 'production';
         case 'development':
             return 'development';
         case 'test':
             return 'test';
         default:                // in case ...
             return 'development';
     };
};

//基于env获取const值的Helper方法

const mapEnvToConstants = function (consts) {
     return consts[environment()];
};

//使用webpack基于env变量集生成构建 // webpack config

module.exports = {
    // ...
    plugins: [
        new webpack.DefinePlugin({
            'const1': mapEnvToConstants(API_KEYS)
        })
    ],
    // ...
}

如果要指向不同的env变量或常量，则需要重建项目。

在Redux App中使用全局变量

2 个答案: