Local States (with Apollo) By Oskar Bechtold Local States State? - PowerPoint PPT Presentation

Local States (with Apollo) By Oskar Bechtold

Local States State? ● Observable Data Service ● Flux ● Redux ● NGRX ● Apollo ● NGXS ●

Types of State A typical web application has the following six types of state: Server state ● Persistent state ● The URL and router state ● Client state ● Transient client state ● Local UI state ●

State Synchronization The persistent state and the server state store the same ● information. So do the client state and the URL. ● We somehow have to synchronize them. ●

Ways to Solve the State Problem Angular Services and RxJS -> Observable Data Service ● Redux using @angular-redux/store (formlerly ng2-redux) ● Redux using @ngrx ● Apollo ● NGXS ●

Stores as Solution for Multiple Problems Stores are a multi-responsibility solution: Component interaction via the Observable pattern. ● Client-side cache if needed, to avoid doing repeated Ajax ● requests. Temporary UI state , as we fill in a large form or want to ● store search criteria in a search form when navigating between router views. Solve the problem of allowing modification of client side ● transient data by multiple actors .

Store Architecture Provide an Observable-like pattern for decoupled ● component interaction. Provide a client container for temporary UI state. ● Provide a cache for avoiding excessive HTTP requests. ● Provide a solution for concurrent data modification by ● multiple actors. Provide a hook for tooling. ● MVC and CRUD vs Event-sourcing, Commands and CQRS ●

Model View Controller and CRUD https://martinfowler.com/bliki/CQRS.html

Command Query Responsibility Segregation https://martinfowler.com/bliki/CQRS.html

Stores and Tooling One of the biggest reasons for using a store it's the tooling ecosystem it provides. The tooling is amazing, time traveling debugging, ● being able to attach a store state to a bug report ● and hot reloading those are huge features. ●

Observable Data Services

Observable Data Services The service, that can be named a store can be injected in any place where the data is needed: export class App { constructor(private todoStore: TodoStore, private uiStateStore: UiStateStore) { } }

Use an Observable Data Service <ul id="todo-list"> <li *ngFor="let todo of todoStore.todos | async" > ... </li> </ul>

Modify the Data of a Service onAddTodo(description) { this.todoStore.addTodo(newTodo) .subscribe( res => {}, err => { this.uiStateStore.endBackendAction(); } ); }

Build an Observable Data Service @Injectable() export class TodoStore { private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([])); public readonly todos: Observable<List<Todo>> = this._todos.asObservable(); constructor(private todoBackendService: TodoBackendService) { this.loadInitialData(); } ... }

Writing an Action Method addTodo(newTodo:Todo):Observable { let obs = this.todoBackendService.saveTodo(newTodo); obs.subscribe( res => { this._todos.next(this._todos.getValue().push(newTodo)); }); return obs; }

Example

Example Exmple taken from https://blog.nrwl.io/managing-state-in-angular-applications-22b75ef5625f

Example

Example Types of State Backend manages the persistent state (the talks) and the ● client state (the filters). The router manages the URL and the router state . ● WatchService manages the transient client state (watched ● talks). The individual components manage the local UI state . ●

Example Problems Syncing Persistent and Server State ● Syncing URL and Client State ●

Example Mistakes No separated state management from computation and ● services. Backend talks to the server and manages state. No clearly defined synchronization strategy of the ● persistent state and the server. No clearly defined synchronization strategy of client ● state and URL. Model is mutable, which makes ensuring any sort of ● guarantees difficult.

Separated State from Services https://blog.nrwl.io/managing-state-in-angular-applications-22b75ef5625f

What About the Router? https://blog.nrwl.io/managing-state-in-angular-applications-22b75ef5625f

Flux

The Original Problem with the unread ● messages counter Facebook Chat Systematically ● displaying incorrect Bug results: users would see one ● unread message, when that originated Flux they click the counter all the messages had already been read

What is Flux Application architecture from Facebook. ● Utilizing a unidirectional data flow. ● More of a pattern rather than a formal framework. ●

https://facebook.github.io/flux/docs/in-depth-overview.html

Redux

What is Redux Application state manager for JavaScript applications. ● Keeps the core principles of the Flux-architecture by ● having a unidirectional data flow in your application. Where Flux applications traditionally have multiple ● stores, Redux applications have only one global, read-only application state . State is calculated by "reducing" over a collection or ● stream of actions.

How does Redux Prevent event soup scenarios caused by event buses. ● Redux store is a combination of the Command and the ● Observable patterns . We dispatch an action into the store, and the store will ● operate on the data inside the store. Emitter of the action does not know what the store will ● do with it. Receiver does not know what triggered the generation of ● the new data. CQRS — Command Query Responsibility Segregation ●

Redux provides a solution by ensuring that: State is wrapped in a single store. ● Handles all updates and notifies all subscribers. ● No need to pass state through entire component tree. ● All changes are sequentially -> predictable end result ● free from unexpected effects and race conditions. State is immutable ● Change in state results in a totally new version of the state ○ More predictable ○ Look at any previous version of the state ○ Incredible debug experience. ○

Three Principles Single source of truth ● The state of your whole application is stored in an object tree ○ within a single store . State is read-only ● The only way to change the state is to emit an action , an object ○ describing what happened. Changes are made with pure functions ● To specify how the state tree is transformed by actions, you write ○ pure reducers .

https://www.dotnetcurry.com/reactjs/1356/redux-pattern-tutorial

https://medium.com/@aksudupa11/redux-sagas-714370b61692 Better video: https://gfycat.com/ThreadbareWeepyAlbino

You Might Not Need Redux Dan Abramov, Co-author of Redux. People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three files to get a simple feature working?” Why indeed! Finally, don’t forget that you can apply ideas from Redux without using Redux. For example, consider a React component with local state.

Flux vs Redux

https://stackoverflow.com/questions/32761316/flux-vs-redux-pros-and-cons-highlights

http://www.prathapkudupublog.com/2017/04/flux-vs-redux.html

@angular-redux

What is @angular-redux? A set of npm packages to integrate redux store into your Angular 2+ applications. Change processing with RxJS observables . ● Compile time optimizations with NgModule and ● Ahead-of-Time compilation. Integration with the Angular change detector . ●

@angular-redux/store - Bindings between Redux and Angular ● @angular-redux/form - Bindings between Angular Forms and ● your Redux state @angular-redux/router - Bindings between Angular Router ● and your Redux state

NGRX

What is NGRX Reactive State for Angular Store is RxJS powered state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.

Key Concepts of NGRX Actions: Unique events dispatched from components and ● services. Reducers: State changes are handled by pure functions ● that take the current state and the latest action to compute a new state. Selectors: Pure functions to select, derive and compose ● pieces of state.

Angular-redux vs NGRX angular-redux/store is just ngrx/store is an RxJS powered state bindings around the Redux API (uses management for Angular applications Redux). (inspired by Redux, but do not use it).

src/app/counter.actions.ts 1. export enum ActionTypes { 2. Increment = '[Counter Component] Increment' , 3. Decrement = '[Counter Component] Decrement' , 4. Reset = '[Counter Component] Reset' , 5. } 6. 7. export class Increment implements Action { readonly type = ActionTypes .Increment; } 8. export class Decrement implements Action { readonly type = ActionTypes .Decrement; } 9. export class Reset implements Action { readonly type = ActionTypes .Reset; }