0

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>[] } }>()
);
SudheerG
  • 1
  • 1

0 Answers0