Console log the state data when using ngrx for State Management in Angular

See also questions close to this topic

• What are the disadvantages of using a shared mutable state in an angular service?

  I noticed all the new state management strategies surrounding angular - NGRX/Ngxs/Observable Data Services/etc..

  and i see they all implement an immutable state.

  What are the disadvantages of simply using a service with a public property that will store the state in a mutable way?

  only downside i see is that it prevents to leverage upon On push change detection.
• How to upgrade @ngrx/store syntax usage from version 2.2.1 to version 6.1.2

  How to upgrade @ngrx/store syntax usage from version 2.2.1 to version 6.1.2

  Recently I upgrade my Angular project, from Angular ^2.0.0 to Angular ^6.0.0 and related npm plugins. However, I am not familiar with @ngrx/store and immutable usage. After project upgraded, app basically works. But the following code throws error: can not read get of undefined:

  import { Store } from '@ngrx/store';
  
  // .....
  
      this.modifyState$ = store.select('suitablyInfoModify');
      this.client$ = this.modifyState$.map(data => data.get('client'));
  
  // works on @ngrx/store v2.2.1, immutable v3.8.1
  // errors on @ngrx/store v6.1.2, immutable v3.8.2
  

  It shows @ngrx/store does not transfer data in map function. The variable data is undefined now.

  So how can I modify this part to get it work? And hope compatible with the original code.
• ngrx normalized state selector

  I'm rewriting a Ionic project to work with ngrx because it is growing a lot and I need to maintain a centralized state.

  I have implemented it with ngrx and using normalized states with the help of Normalizr.

  Now I have a doubt on how to pass to dumb component a populated object:

  Suppose I have two interfaces:

  interface Conversation {
      date: Date,
      lastMessage: string //this is the id of a message entity coming from normalizr
  }
  

  and

   interface Message {
         content: string
  }
  

  Now when I'm trying to get all conversations to pass to the dumb component I'm using a selector like this:

  getConversations() {
  
      //select all the conversations to have a shape of Conversation[]
      let conversations$ = this.store.select(state => Object.keys(state.entities.conversations).map( (id:string) => state.entities.conversations[id] ));
  
      //select all the messages in a shape { [id:string] : Message }
      let messages$ = this.store.select(state => state.entities.messages);
  
      return Observable.combineLatest(
        conversations$,
        messages$,
        (conversations, messages) => {
          return conversations.map(conversation => {
            return { ...conversation, lastMessage: messages[conversation.lastMessage] }
  
          });
        }
      )
    }
  

  But the Observable I'm returning is not an array of Conversation[] because

  return { ...conversation, lastMessage: messages[conversation.lastMessage] }
  

  is putting inside 'lastMessage' an object of type Message instead of a String.

  I tried to use interfaces with the object type instead of strings

  interface Conversation {
         date: Date,
         lastMessage: Message
      }
  

  But then I cannot use selector like

  this.store.select(state => state.entities.messages[conversation.lastMessage]
  

  because it is not a string anymore.

  How can I achieve this?

  Thank you
• Ngrx advantages over Observable Data Services architecture?

  Both observable data service and Ngrx store provides a Store based solution for angular applications.

  Ngrx uses the flux design pattern and requires a 3rd party library, in contrast of Observable data services which can be implemented with built in features of angular and rxjs and is in a way i guess is an angular design pattern by it self.

  information regarding Observable Data Service architecture can be found here

  I have read his article : Redux, RxJs and Ngrx Store - When to Use a Store And Why? to really understand what are the main problems that store based solution aim to solve , and the way i see it they both solve these main problems :

  • solves the Facebook counter problem which happened because of multiple actors changing the same data concurrently
  • the "extraneous props issue" when moving an input way down/up the component tree when only the bottom/top one really needs it (useless to all the components in the way - breaking SRP)

  i see a cost when using Ngrx - the bundle size is bigger , plenty boiler plate code - for a simple feature need to change multiple files and impl an action , a reducer, if using ngrx side effects then also a loader action and error action.. the learning curve of understanding the concept and the way flux works is bigger then observable data services i guess..

  one advantage however is the awesome dev tools it provides.

  So the question is as the title states : Ngrx advantages over Observable Data Services architecture ?

  a simple Todos observable data service store example :

   @Injectable()
      export class TodoStore {
  
      private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([]));
  
      constructor(private todoBackendService: TodoBackendService) {
          this.loadInitialData();
      }
  
      get todos() {
          return asObservable(this._todos);
      }
  
      loadInitialData() {
          this.todoBackendService.getAllTodos()
              .subscribe(
                  res => {
                      let todos = (<Object[]>res.json()).map((todo: any) =>
                          new Todo({id:todo.id, description:todo.description,completed: todo.completed}));
  
                      this._todos.next(List(todos));
                  },
                  err => console.log("Error retrieving Todos")
              );
  
      }
  
      addTodo(newTodo:Todo):Observable {
  
          let obs = this.todoBackendService.saveTodo(newTodo);
  
          obs.subscribe(
                  res => {
                      this._todos.next(this._todos.getValue().push(newTodo));
                  });
  
          return obs;
      }
  
      toggleTodo(toggled:Todo): Observable {
          let obs: Observable = this.todoBackendService.toggleTodo(toggled);
  
          obs.subscribe(
              res => {
                  let todos = this._todos.getValue();
                  let index = todos.findIndex((todo: Todo) => todo.id === toggled.id);
                  let todo:Todo = todos.get(index);
                  this._todos.next(todos.set(index, new Todo({id:toggled.id, description:toggled.description, completed:!toggled.completed}) ));
              }
          );
  
          return obs;
      }
  
  
      deleteTodo(deleted:Todo): Observable {
          let obs: Observable = this.todoBackendService.deleteTodo(deleted);
  
          obs.subscribe(
                  res => {
                      let todos: List<Todo> = this._todos.getValue();
                      let index = todos.findIndex((todo) => todo.id === deleted.id);
                      this._todos.next(todos.delete(index));
  
                  }
              );
  
          return obs;
      }
  
  
  }
  
• Ngrx store VS Observable data services

  I cant seem to find a problem that Ngrx store solution solves, that Observable Data services does not.

  as mentioned in this article the main reasons to use flux architecture/Redux/Ngrx or any other store solution are :

  1. When there are multiple actors trying to modify the same data concurrently (Facebook counter issue)

  2. To Solve The "extraneous props" problem (when data is passed down or up the component tree , and that data is only relevant to the component on top/bottom)

  3. Unidirectional data flow - for predictability and maintainability

  observable data services solves these problems as well (as they are considered a store solution to my understanding) :

  • its flow is unidirectional - therefore solving the problem of multiple actors trying to modify the same data concurrently.
  • the "extraneous props" problem is solved simply by injecting the relevant service in the relevant component.

  there are more problems that flux solves metioned in the article above , but i believe those too are solved with observable data services , i only metioned the ones that seemed most relevant..

  so why use Ngrx store solution , and not the built in Observable Data Service store solution ?

  the costs i personally see when using the Ngrx are a lot of boilerplate code, and the fact that learning the flux architecture it self is probably a bigger learning curve then Observable Data Services architecture, maintaining global state, the bundle size is bigger with Ngrx

  the only advantage i can come up with Ngrx is the Redux Devtools (which is extremely useful in my experience)

  in case you faced some problems with observable data services, and migrated to Ngrx , i will be happy to hear what problems were there ? and how are they solved with Ngrx ? and what more advantages Ngrx has over Observable Data Services ?

  Thanks !!
• which is the best way to implement Flux in Angular?

  there is two library as i find @angualr-redux supported By Redux and Ngrx supported by angular Team which is a reimplementation of redux . So which is the best for performed Angular App ? Does @angualr-redux supports LazyLoading