vendredi 22 mars 2019

Why am I not getting any Data? Ngrx

I tried to implement Ngrx into my Angular Application, but sadly haven't been able to retrieve any data. Any help is appreciated!

What I am trying to do in the property.component.ts is get all the data when the component gets instantiated and just display the data in the property.component.html.

property.component.ts

import {Component, OnInit} from '@angular/core';
import {select, Store} from '@ngrx/store';

import {Router} from '@angular/router';

@Component({
  selector: 'app-property',
  templateUrl: './property.component.html',
  styleUrls: ['./property.component.css']
})
export class PropertyComponent implements OnInit {

  properties$ = this._store.pipe(select('properties'));

  constructor(private _store: Store<any>, private _router: Router) {}

  ngOnInit() {
    this._store.dispatch({
      type: '[Property] Get Properties'
    });
    console.log(this.properties$);
  }

  navigateToProperty(id: number) {
    this._router.navigate(['property', id]);
  }

}

property.component.html

<p>test</p>
<p></p>

property.service.ts

    import { Injectable } from '@angular/core';
    import {HttpClient, HttpHeaders} from '@angular/common/http';
    import { Observable } from 'rxjs';
    import {PropertyModel} from '../models/property.model';

    @Injectable({
      providedIn: 'root'
    })
    export class PropertyService {
      propertiesUrl = 'someapi';
      private httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      };

      constructor(private http: HttpClient) { }

      getProperties(): Observable<PropertyModel[]> {
        return this.http.get<PropertyModel[]>(this.propertiesUrl, this.httpOptions);
      }
    }

property.actions.ts

import { Action } from '@ngrx/store';
import {PropertyModel} from '../../models/property.model';


export const GET_PROPERTIES = '[Property] Get Properties';
export const GET_PROPERTIES_SUCCESS = '[Property] Get Properties Success';
export const SEARCH_PROPERTY = '[Property] Get Property';
export const SEARCH_PROPERTY_SUCCESS = '[Property] Get Property Success';

export class GetProperties implements Action {
  public readonly type = GET_PROPERTIES;
  constructor(public retrievedProperties: PropertyModel[]) {}
}

export class GetPropertiesSuccess implements Action {
  public readonly type = GET_PROPERTIES_SUCCESS;
  constructor(public retrievedProperties: PropertyModel[]) {}
}

export class GetProperty implements Action {
  public readonly type = SEARCH_PROPERTY;
  constructor(public searchId: string) {}
}

export type PropertyActions = GetProperties | GetPropertiesSuccess | GetProperty;

property.effects.ts

import {Injectable} from '@angular/core';
import {Actions, Effect, ofType} from '@ngrx/effects';

import {GET_PROPERTIES, PropertyActions} from '../actions/property.actions';
import {PropertyService} from '../../services/property.service';
import {mapTo} from 'rxjs/operators';


@Injectable()

export class PropertyEffects {

  @Effect()
  getProperties$ = this.actions$.pipe(
    ofType<PropertyActions>(GET_PROPERTIES),
    mapTo(this.propertyService.getProperties())
  );

  constructor(private actions$: Actions, private propertyService: PropertyService) {}

}

and finally my property.reducers.ts

import {GET_PROPERTIES, GET_PROPERTIES_SUCCESS, PropertyActions} from '../actions/property.actions';
import {PropertyModel} from '../../models/property.model';

export function propertyReducer(properties: PropertyModel[] = [], action: PropertyActions): PropertyModel[] {
  switch (action.type) {
    case GET_PROPERTIES: {
      return [...action.retrievedProperties];
    }
    default: {
      return properties;
    }
  }
}




Aucun commentaire:

Enregistrer un commentaire