react redux 中间件无法访问 utils 中定义的变量答案

【问题标题】：react redux middleware cannot access variable defined in utilsreact redux 中间件无法访问 utils 中定义的变量
【发布时间】：2021-10-06 06:36:02
【问题描述】：

您好，我创建了一个 redux 自定义中间件并尝试调用从 ./utils/api.js 文件定义和导出的 apiUrl 常量值。但收到此错误

ReferenceError: 在初始化之前无法访问“apiUrl”

    export const apiUrl = window.apiUrl || `${window.location.origin}/api`;

    import * as api from './config/api';
    const apiUrl = api.apiUrl;

虽然，这个常量值可以在整个应用程序（所有组件和操作）中访问，但无法在 redux 自定义中间件中访问它。

谢谢

【问题讨论】：

啊，你的redux-custom-middleware.js（间接）是由./config/api导入的吗？循环依赖可以解释该错误。该模块尚未加载，但另一个模块已在尝试读取其值。
将它移到你的依赖树中更高的位置，打破循环。否则，我认为如果你将它包装在一个简单的函数中，例如getApiUrl()，这也可以解决它。
我的意思是export function apiUrl() { return window.apiUrl; }。 IIRC JS 处理导出函数与导出变量的方式不同，即使两个值都是函数。
我知道，我的意思是直接使用export function。您可能知道函数在 JS 中是“预定义的”，例如func(); function func(){} 将起作用，即使该函数是在您实际调用它之后定义的。但是func(); const func = ()=>{}; 会出错。因此，如果export function 发生同样的情况，那可能会解决您的问题。 当然，打破循环依赖仍然是更好的解决方案。
假设您所做的只是将api.apiUrl 替换为api.apiUrl() 左右，应该很容易测试。除非您打算将其移至其他模块，否则我不确定该怎么做。

【解决方案1】：

您可以导出函数而不是常量，因为函数是急切声明的：

export function apiUrl() {
    return window.apiUrl;
}

这使您可以立即使用apiUrl()，因为循环依赖很好，因为函数会立即“初始化”。

【讨论】：