Slide 24
Slide 24 text
songs.reducer.ts
import { createFeature, createReducer, on } from '@ngrx/store';
export interface State {
songs: Song[];
activeSongId: number | null;
isLoading: boolean;
}
const initialState: State = {
songs: [],
activeSongId: null,
isLoading: false,
};
export const songsFeature = createFeature({
name: 'songs',
reducer: createReducer(
initialState,
on(** **. */),
on(** **. */)
),
});
const {
name, =/ feature name
reducer, =/ feature reducer
selectSongsState, =/ feature selector
selectSongs, =/ selector for `songs` property
selectActiveSongId, =/ selector for `activeSongId` property
selectIsLoading, =/ selector for `isLoading` property
} = songsFeature;
songs.module.ts
import { StoreModule } from '@ngrx/store';
import { songsFeature } from './songs.reducer';
@NgModule({
imports: [
StoreModule.forFeature(songsFeature),
],
})
export class SongsModule {}
songs.selectors.ts
import { createSelector } from '@ngrx/store';
import { songsFeature } from './songs.reducer';
export const selectActiveSong = createSelector(
songsFeature.selectSongs,
songsFeature.selectActiveSongId,
(songs, activeSongId) =>
songs.find((song) => song.id === activeSongId)
);