I'm attempting to set up an application that uses NGRX.
I'm having difficulties with accessing returned Entity parameters when a single entity is supposed to be loaded.
I'm also having troubles loading the Entity in a modal form due to not being able to access the entity parameters.
At first the employee list is called from the back end via data.service
data.service.ts :
getEngineers() {
return this.http.get<Engineer[]>(this.engineersUrl);
}
which returns all the registered engineers.
Once all of the engineer entries have been listed, engineer-list.componenent.ts adds editEngineer function:
editEngineer(engineer: Engineer) {
this.store.dispatch(new engineerActions.LoadEngineer(engineer.id));
this.openEditDialog(engineer);
console.log(engineer.id, 'selectedEngineersId');
}
openEditDialog({ Name, LastName, PhoneNumber, Company, Country }: Engineer)
{
const dialogRef = this.dialog.open(EgnineerEditDialogComponent, {
disableClose: true,
width: '300px',
data: {
Name, LastName, PhoneNumber, Company, Country
}
});
}
Then the loadEngineer$() effect takes place:
@Effect()
loadEngineer$: Observable<Action> = this.actions$.pipe(
ofType<engineerActions.LoadEngineer>(
engineerActions.EngineerActionTypes.LOAD_ENGINEER
),
mergeMap((action: engineerActions.LoadEngineer) =>
this.dataService.getEngineerById(action.payload).pipe(
map(
(engineer: Engineer) =>
new engineerActions.LoadEngineerSuccess(engineer)
),
catchError(err => of(new engineerActions.LoadEngineerFail(err)))
)
),
);
the data.service calls for getEngineerById():
getEngineerById(payload: number): Observable<Engineer> {
console.log(`${this.engineerUrl}?id=${payload}`);
return this.http.get<Engineer>(`${this.engineerUrl}?id=${payload}`);
}
Which returns a json response of the selected engineer from a php mysql request:
$result = $conn->query($sql);
$emparray = $result->fetch_all( MYSQLI_ASSOC );
echo json_encode( $emparray );
The next step is taken by the reducer with the LOAD_ENGINEER_SUCCESS
case engineersActions.EngineerActionTypes.LOAD_ENGINEER_SUCCESS: {
console.log(action.payload.id, ' - ID of the selected engineer object');
return engineerAdapter.addOne(action.payload, {
...state,
selectedEngineerId: action.payload.id,
loading: false,
loaded: true
});
}
The problem here is that the console logged response of the reducer
console.log(action.payload.id, ' - ID of the selected engineer object');
returns undefined " - ID of the selected engineer object"
while console logging "action.payload" returns:
[{…}]
0:
Company: "Andys Shack"
Country: "EE"
LastName: "Franklichtenshtein "
Name: "Angus "
PhoneNumber: "123123123123 "
Registered: "2019-03-09 01:33:28"
id: "19"
__proto__: Object
length: 1
__proto__: Array(0)
and NGRX also returns an error:
entity.js:106 @ngrx/entity: The entity passed to the `selectId` implementation returned undefined. You should probably provide your own `selectId` implementation. The entity that was passed: [{…}]0: {id: "19", Name: "Angus ", LastName: "Franklichtenshtein ", PhoneNumber: "123123123123 ", Country: "EE", …}length: 1__proto__: Array(0) The `selectId` implementation: function (instance) { return instance.id; }
