Cómo usar los modelos ReSolve View

Los marcos de JavaScript front-end modernos, como React, proporcionan una nueva forma de crear interfaces de usuario mediante la aplicación de principios funcionales de programación reactiva para el desarrollo de la interfaz de usuario.

Este artículo presenta técnicas de desarrollo de interfaz de usuario isomórficas y reactivas utilizando las bibliotecas React y Redux y el marco ReSolve.

Conceptos básicos

De acuerdo con el principio CQRS, la implementación debe separarse en el lado de lectura y el lado de escritura: las funciones del lado de lectura nunca deben cambiar ningún dato. reSolve utiliza los siguientes conceptos para la segregación del lado de lectura y del lado de escritura:

  • Modelo de lectura: se utiliza para obtener el estado del sistema o su parte en las consultas (principalmente, GraphQL).
  • Ver modelo: se utiliza para mostrar el estado del sistema en la interfaz de usuario. Funciona del lado del cliente.
  • Escribir modelo: se utiliza para modificar el estado del sistema.

En reSolve, el lado de lectura de CQRS se divide en modelos de lectura y vista. Dado que View Models proporciona los datos de la interfaz de usuario, este concepto se describe con más detalle.

Tipo de referencia de modelo de vista

Un modelo de vista se puede describir de la siguiente manera:

escriba ViewModel = {
    nombre: Cadena
    proyección: {
        Init: nulo -> Estado
        [Tipo de evento]: (Estado, Evento) -> Estado
        // ...
    }
    serializeState: State -> String
    deserializeState: String -> State
}
type State = Inmutable 
tipo Evento = {
    agregateId: UUID
    marca de tiempo: Fecha
    tipo: EventType
    carga útil: Cualquiera
}
tipo EventType = String

La parte principal de cualquier modelo de lectura (un modelo de vista es un tipo de modelo de lectura) son sus funciones de proyección. Estas funciones se utilizan para describir los cambios de estado en respuesta a eventos. Sin embargo, el modelo de lectura no modifica el estado, porque de acuerdo con el concepto de abastecimiento de eventos, se almacena un flujo de eventos en lugar del estado. La proyección se utiliza para obtener el estado de la secuencia de eventos (aplique secuencialmente cada evento al estado inicial y devuelva el resultado). Por lo tanto, las funciones de proyección muestran cómo cambia el estado después de cada evento posible.

Dado que los modelos de vista se ejecutan en el lado del cliente, el estado debe transferirse al navegador del cliente, lo que significa que debe ser fácilmente serializable. El proceso de serialización y deserialización se describe mediante las funciones serializeState y deserializeState. En la mayoría de los casos, podemos usar el formato JSON para esto.

¿Cómo funciona en el lado del cliente con Redux?

Suscribirse / darse de baja a / desde un modelo de vista por agregateId

Se llama a componentDidMount () después de instalar un componente. Use este método para suscribirse a eventos. Puede usar este método para suscribirse a eventos, pero debe darse de baja de los eventos usando componentWillUnmount () después.

El componentWillUnmount () se invoca inmediatamente antes de que un componente se desmonte y se destruya.

Para automatizar este proceso, use el componente de orden superior de conexión (HOC).

importar {conectar} desde 'resolve-redux';
const mapStateToProps = estado => ({
    ... estado [viewModelName] [agregateId],
    viewModelName, // campo obligatorio
    agreggateId // campo requerido
});
exportar conexión predeterminada (mapStateToProps) (Componente);

Solicitud de estado inicial

La conexión maneja la acción SUSCRIBIRSE y solicita un estado de modelo de vista inicial con el Id. Agregado agregado del servidor.

Suscríbase a eventos

Después de recibir initialState, connect se suscribe a eventos y configura una conexión de socket web.

Darse de baja de eventos

La conexión maneja la acción UNSUBSCRIBE, elimina el estado de un modelo de vista con el Id. Agregado especificado y se da de baja de los eventos.

Cómo agregar createResolveMiddleware a la tienda

importar {createStore, applyMiddleware} desde 'redux';
importar {createResolveMiddleware, createViewModelsReducer} desde 'resolve-redux';
importar viewModels desde '../../common/view-models';
const reductor = createViewModelsReducer ();
const middleware = [createResolveMiddleware (viewModels)];
exportar default initialState => createStore (reductor, initialState, applyMiddleware (... middleware));

¿Cómo funciona en el lado del servidor con ReSolve?

Solicitud del Estado

Una consulta recibe el estado actual del modelo de vista con el Id. Agregado agregado. Si el estado especificado está en el caché, se devuelve instantáneamente. De lo contrario, el modelo de vista maneja todos los eventos de EventStore que tienen el Id. Agregado agregado para generar el estado. El estado resultante se almacena en la memoria caché y se envía al cliente.

Suscribirse / Cancelar suscripción a / desde eventos

Todos los eventos guardados en EventStore también se envían al bus en tiempo real. El cliente recibe eventos si tiene una suscripción activa a eventos con el Id. Agregado y los tipos de evento especificados.

Ejemplos de código

  • Ejemplo de aplicación de tareas pendientes

Enlaces

  • GitHub "ReSolve"
  • Crear-resolver-aplicación
  • Leer modelo, ver modelo y consulta
  • Resolve-redux
  • Twitter "ReSolve"
  • Facebook "ReSolve"