javascript - 在 react/redux 应用程序中，在哪里保存服务实例？

Question

假设我正在用 Redux 编写一个应用程序，我的任务是使用第 3 方库添加日志记录。其API如下:

function createLogger(token) {
    // the logger has internal state!
    let logCount = 0;

    return {
        log(payload) {
            logCount++;            // modify local state

            fetch('/someapi', {    // ship payload to some API
                method: 'POST',
                body: payload
            });
        }
    };
}

然后我会像这样使用库:

let logger = createLogger('xyz');
logger.log('foobar');

我绝对想在应用程序初始化期间只创建一次记录器实例。但接下来的问题是:我在哪里存储记录器实例？

首先要将它放在商店的某个地方。但这是个好主意吗？正如我在代码中演示的那样，记录器对象是有状态的，它在闭包中存储一个计数器。我没有像使用不可变对象(immutable对象)那样获得新实例。正如我们所知，状态只能通过纯 reducer 函数进行修改。

其他可能性是在 redux 中间件闭包中的某处创建实例，或者只创建一个全局变量，这在可测试性方面显然是有害的。

对于这种(我认为)相当常见的场景是否有最佳实践？

Answer 1

因为您使用的是 ES6 模块，所以我会将您的记录器设置为一个模块，export 并在您计划使用它的任何地方import。我认为从操作中记录日志是一个可靠的计划，因为它使组件不知情，并且不会因副作用而污染商店。

function createLogger(token) {
    // the logger has internal state!
    let logCount = 0;

    return {
        log(payload) {
            logCount++;            // modify local state

            fetch('/someapi', {    // ship payload to some API
                method: 'POST',
                body: payload
            });
        }
    };
}

export default const logger = createLogger('xyz');

你的 Action 创造者

import logger from 'logger-module';

//
logger.log('somestuff');

通过导入记录器并将任何 spy / stub 放在您需要拦截的方法上，仍然可以轻松实现测试。