javascript - resueltos - ¿Dónde se guardan instancias de servicio en una aplicación de reacción/reducción?

reacciones redox ejemplos

Question

Supongamos que estoy escribiendo una aplicación en Redux y tengo la tarea de agregar el registro utilizando una biblioteca de terceros. Su API es la siguiente:

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
            });
        }
    };
}

Entonces usaría la biblioteca algo como esto:

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

Definitivamente quiero crear la instancia del registrador solo una vez durante el inicio de la aplicación. Pero entonces la pregunta es: ¿ dónde guardo la instancia del registrador ?

El primer instinto es ponerlo en algún lugar de la tienda. ¿Pero es una buena idea? Como he demostrado en el código, el objeto logger tiene estado, almacena un contador en el cierre. No obtengo una instancia nueva como lo haría con un objeto inmutable. Como sabemos, el estado solo debe modificarse a través de funciones reductoras puras.

Otras posibilidades son crear la instancia en algún lugar en un cierre middleware redux o simplemente crear una variable global, que obviamente es malvada en términos de capacidad de prueba.

¿Existe una mejor práctica para este (creo) escenario bastante común?

Answer 1

Como está utilizando módulos ES6, configuraría su registrador como un módulo, lo export e import donde quiera que vaya a utilizarlo. Creo que el registro de las acciones es un plan sólido, ya que mantiene los componentes inconscientes y no contamina la tienda con efectos secundarios.

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'');

Tus creadores de acción

import logger from ''logger-module'';

//
logger.log(''somestuff'');

Las pruebas aún se pueden realizar fácilmente importando el registrador y colocando el espía / trozo en sus métodos que necesita para interceptar.

Answer 2

De la documentación de Redux :

/**
 * Sends crash reports as state is updated and listeners are notified.
 */
const crashReporter = store => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error(''Caught an exception!'', err)
    Raven.captureException(err, {
      extra: {
        action,
        state: store.getState()
      }
    })
    throw err
  }
}

Raven es una biblioteca de terceros.

Si la biblioteca tiene su propio estado, no debería ser un problema utilizarlo en middleware (el estado pertenece a la biblioteca y no a su aplicación). Si está creando un estado para ello, por alguna razón, ese estado debería pertenecer a la tienda de Redux, probablemente bajo store.logger o algo así.