# How to use View-Models

... The introductory text of the reactive UI and isomorphic applications

[Image]

## Basic concept

View model is a read model or part of it that represent a part of UI state and can live on client. It can be updated by Redux reducer function on the client and on the server.

## Type Reference "ViewModel"

```
type ViewModel = {
    name: String
    projection: {
        Init: Void -> State
        [EventType]: (State, Event) -> State
        ...
    }
    serializeState: State -> String
    deserializeState: String -> State
}
```

```
type State = Immutable<Object|Array>
```

```
type Event = {
    aggregateId: UUID
    timestamp: Date
    type: EventType
}
```

```
type EventType = String
```

## How its working on client-side with Redux

1. Get Initial State by viewModel (eventTypes) + aggregateId. Initial State -> ViewModels Reducer
2. Subscribe on Events by viewModel (eventTypes) + aggregateId. Store.dispatch(event)

...

## How its working on server-side with ReSolve

1. Query get Events by viewModel (eventTypes) + aggregateId. Events -> ViewModels Reducer -> Client
2. Bus get Events by viewModel (eventTypes) + aggregateId. Events -> Socket.emit(events) -> Client

...

## TL;DR
* Link to Github "ToDo App"
* Link to Github "Two Level ToDo App"

## Code Examples
* ToDo App
    * UI
    * Aggregates
    * View-models

* Two Level ToDo App
    * UI
        * Routing
        * Index
        * Todo
    * Aggregates
    * View-models

## Conclusion
* Text
* Fork/Star me on Github

## Links
* Link to Github "ReSolve"
* Link to Github "Create-resolve-app"
* Link to Github "EventStore"
* Link to Github "View-models"
* Link to Github "Aggregates"
* Link to ReSolve Medium
* Link to ReSolve Twitter
* Link to ReSolve Facebook