Как исправить: 'Ошибка типа: сущности не повторяемы' в ngRx: Пожалуйста, дайте мне знать, если кто-то получит это.
// users.action
import { Course } from '../model/user';
import { createAction, props } from '@ngrx/store';
import { Update } from '@ngrx/entity';
export const loadCourses = createAction(
'[Courses List] Load Courses via Service'
);
export const coursesLoaded = createAction(
'[Courses Effect] Courses Loaded Successfully',
props<{ courses: Course[] }>()
);
export const createCourse = createAction(
'[Create Course Component] Create Course',
props<{ course: Course }>()
);
export const deleteCourse = createAction(
'[Courses List Operations] Delete Course',
props<{ courseId: string }>()
);
export const updateCourse = createAction(
'[Courses List Operations] Update Course',
props<{ update: Update<Course> }>()
);
export const courseActionTypes = {
loadCourses,
coursesLoaded,
createCourse,
deleteCourse,
updateCourse,
};
// Redurs -> user.ts
import { Course } from '../model/user';
import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { createReducer, on, Action } from '@ngrx/store';
import { courseActionTypes, coursesLoaded } from '../action/user';
export interface State extends EntityState<Course> {
coursesLoaded: boolean;
}
export const adapter: EntityAdapter<Course> = createEntityAdapter<Course>();
export const initialState: State = adapter.getInitialState({
coursesLoaded: false,
});
export const courseReducer = createReducer(
initialState,
on(courseActionTypes.coursesLoaded, (state, { courses }) => {
alert('hellobc');
// the problem is here
return adapter.addAll(courses, state);
})
// on(courseActionTypes.createCourse, (state, action) => {
// return adapter.addOne(action.course, state);
// }),
// on(courseActionTypes.deleteCourse, (state, action) => {
// return adapter.removeOne(action.courseId, state);
// }),
// on(courseActionTypes.updateCourse, (state, action) => {
// return adapter.updateOne(action.update, state);
// })
);
export function reducer(state: State | undefined, action: Action) {
return courseReducer(state, action);
}
export const { selectAll, selectIds } = adapter.getSelectors();
// SELECTOR -> user.selector. ts
import { State } from '../store/reducers/user';
import { Course } from './../store/model/user';
import { createSelector, createFeatureSelector } from '@ngrx/store';
import { selectAll, selectIds } from '../store/reducers/user';
export const courseFeatureSelector = createFeatureSelector<State>('courses');
export const getAllCourses = createSelector(courseFeatureSelector, selectAll);
export const areCoursesLoaded = createSelector(
courseFeatureSelector,
(state) => state.coursesLoaded
);
// состояние -> app.state.module.ts
import { Course } from './store/model/user';
export interface AppState {
readonly courses: Course[];
}
// эффекты -> пользователь .effect.ts
import {
courseActionTypes,
coursesLoaded,
updateCourse,
} from '../store/action/user';
import { UserServices } from '../services/user';
import { createEffect, Actions, ofType } from '@ngrx/effects';
import { concatMap, map, tap, switchMap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
@Injectable()
export class CourseEffects {
loadCourses$ = createEffect(() =>
this.actions$.pipe(
ofType(courseActionTypes.loadCourses),
switchMap(() => this.courseService.AllUser()),
map((courses) => courseActionTypes.coursesLoaded({ courses }))
)
);
constructor(private courseService: UserServices, private actions$: Actions) {}
}
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { NavigationComponent } from './navigation/navigation.component';
import { HomeComponent } from './home/home.component';
import { CreateuserComponent } from './createuser/createuser.component';
import { UpdateuserComponent } from './updateuser/updateuser.component';
import { reducer } from './store/reducers/user';
import { HttpClientModule } from '@angular/common/http';
import { EffectsModule } from '@ngrx/effects';
import { CourseEffects } from './effects/user';
@NgModule({
declarations: [
AppComponent,
NavigationComponent,
HomeComponent,
CreateuserComponent,
UpdateuserComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
StoreModule.forRoot({ courses: reducer }),
EffectsModule.forRoot([CourseEffects]),
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
// home.component.ts
import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as user_action from '../store/action/user';
import { Course } from '../store/model/user';
import { AppState } from '../app-state.module';
import { getAllCourses } from '../selector/user.selector';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
public users$: Observable<Course[]>;
constructor(private store: Store<any>) {}
ngOnInit() {
this.users$ = this.store.select(getAllCourses);
this.users$.subscribe((data) => {
console.log(data);
});
this.store.dispatch(user_action.loadCourses());
}
}