I am trying to update tutor name with tutor ID as Unique for every object in tutors array. Using NgRX entity concept
Update<> method in NgRX entity library
Here is my data structure.
let subjectDetails = [
{ id: '1', title: 'Core Java Tutorial', category: 'Java', tutors: [
{
tutorId: 1,
tutorName: "Rajesh",
tutorsAge : 45
},
{
tutorId: 2,
tutorName: "Ramesh",
tutorsAge : 50
}
] },
{ id: '2', title: 'Angular Tutorial', category: 'Angular', tutors: [
{
tutorId: 1,
tutorName: "Dinesh",
tutorsAge : 30
}
] },
];
Following or the files which implemented as part of updating tutor name for particular ID.
Model File : models/article.ts
export class Subject {
id = '',
title = '';
category = '';
tutors = [];
Reducer File : reducers(folder)/article.reducer.ts
import {createFeatureSelector,createSelector,createReducer,on,Action} from '@ngrx/store';
import * as fromActions from '../actions/article.action';
import { ArticleState } from '../states/app.state';
import * as fromAdapter from './article.adapter';
export const initialState: ArticleState = fromAdapter.adapter.getInitialState({
selectedArticleId: '',
tutors: [],
});
const _articleReducer = createReducer(
initialState,
on(fromActions.UpdateArticle, (state, { payload }) =>
fromAdapter.adapter.updateOne(payload.article, state)
),
on(fromActions.UpdateArticles, (state, { payload }) =>
fromAdapter.adapter.updateMany(payload.articles, state)
));
export function articleReducer(state: any, action: Action) {
return _articleReducer(state, action);
}
// Creating selectors
export const getSelectedArticleId = (state: ArticleState) =>
state.selectedArticleId;
export const getArticleState =
createFeatureSelector<ArticleState>('articleState');
export const selectArticleIds = createSelector(
getArticleState,
fromAdapter.selectArticleIds
);
export const selectArticleEntities = createSelector(
getArticleState,
fromAdapter.selectArticleEntities
);
export const selectCurrentArticle = createSelector(
selectArticleEntities,
selectCurrentArticleId,
(articleEntities, articleId) => articleEntities[articleId]
);
export const selectCurrentArticleTutors = createSelector(
selectArticleEntities,
selectCurrentArticleId,
(articleEntities, articleId) => articleId? articleEntities[articleId].tutors: ""
Adapter File: reducers(folder)/article.adapter.ts
import { EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { Subject } from '../models/article';
export const adapter: EntityAdapter<Subject> = createEntityAdapter<Subject>({
sortComparer: false,
});
export const {
selectIds: selectArticleIds,
selectEntities: selectArticleEntities,
selectAll: selectAllArticles,
selectTotal: articlesCount,
} = adapter.getSelectors();
app.state.ts File
import { Subject } from '../models/article';
import { EntityState } from '@ngrx/entity';
import { articleReducer } from '../reducers/article.reducer';
export interface AppState {
articleState: ArticleState;
}
export const appReducer = {
articlestate: articleReducer
}
export interface ArticleState extends EntityState<Subject> {
selectedArticleId: string;
tutors: [];
}
Actions File : (actions/article.action.ts)
import { createAction, props } from '@ngrx/store';
import { Update } from '@ngrx/entity';
import { Subject } from '../models/article';
enum ArticleActionTypes {
ADD_ARTICLE = '[ARTICLE] Add Article',
ADD_ARTICLES = '[ARTICLE] Add Articles',
UPDATE_ARTICLE = '[ARTICLE] Update Article',
UPDATE_ARTICLES = '[ARTICLE] Update Articles',
REMOVE_ARTICLES = '[ARTICLE] Remove Articles',
SELECT_ARTICLE = '[ARTICLE] Article By Id',
}
export const AddArticle = createAction(
ArticleActionTypes.ADD_ARTICLE,
props<{ payload: { article: Subject } }>()
);
export const UpdateArticle = createAction(
ArticleActionTypes.UPDATE_ARTICLE,
props<{ payload: { article: Update<Subject> } }>()
);
export const UpdateArticles = createAction(
ArticleActionTypes.UPDATE_ARTICLES,
props<{ payload: { articles: Update<Subject>[] } }>()
);