如何从商店取得状态？ 角/ NGRX

Question

i long time work with react/redux and now i trying to learn angular/ngrx.

And I had questions

how write in store? In redux store i just connect used function connect, and in angular i connect like this

        @Component({   selector: 'home',
            templateUrl: './home.html' }) export class HomeComponent implements OnInit {

            console = console;
            todos$: Observable<any>;
            todo: string;
            todoDate: string;
            indexToEdit: number | null;


            constructor(private store: Store<any>) {}

            ngOnInit() {
                this.todos$ = this.store.select('todoReducer');
            }

next i use todos$ for cycle in template, but if i console.log(todos$) its just object of store, and i can't find my store state, how can I read state from the store?

Answer 1

You can use rxjs operator do to show sideeffects dont forget to import it.

this.todos$ = this.store.select('todoReducer').do(res => console.log(res))

another way will be to subscribe but this will defeat the purpose of ngrx. And you will not use async pipe in template and also you will need to unsubscribe.

storeSub: Subscription;

this.storeSub = this.store.select('todoReducer').subscribe((data) => {
  console.log(data);
  this.todos = data;
})

Answer 2

todo$ is an observable of your state.

You can use it in controller like this:

this.todo$.subscribe(state => console.log(state));

Or in your template like this:

{{ todo$ | async }}
<input type="text" name="myfield" (change)="modifyField($event.target.value)" [value]="(todo$ | async)?.myfield"></input>