NgRx Feature Creator

Transcript

1. NgRx Feature Creator Marko Stanimirović
2. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★ NgRx Team Member ★ Angular Belgrade Organizer ★ Hobby Musician ★ M.Sc. in Software Engineering
3. What is NgRx Feature?
4. Reducer
5. Reducer Feature Name
6. Reducer Feature Name Selectors
7. Reducer Feature Name Selectors NgRx Feature
8. Creating NgRx Feature
9. export interface State { songs: Song[]; activeSongId: number | null; isLoading: boolean; } const initialState: State = { songs: [], activeSongId: null, isLoading: false, }; songs.reducer.ts
10. import { createReducer } from '@ngrx/store'; export interface State { songs: Song[]; activeSongId: number | null; isLoading: boolean; } const initialState: State = { songs: [], activeSongId: null, isLoading: false, }; export const reducer = createReducer( ); songs.reducer.ts
11. import { createReducer } from '@ngrx/store'; export interface State { songs: Song[]; activeSongId: number | null; isLoading: boolean; } const initialState: State = { songs: [], activeSongId: null, isLoading: false, }; export const reducer = createReducer( initialState, ); songs.reducer.ts
12. import { 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 reducer = createReducer( initialState, on( SongsApiActions.songsLoadedSuccess, (state, { songs }) => ({ ==.state, songs, isLoading: false, }) ), on(** **. */) ); songs.reducer.ts
13. import { 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 reducer = createReducer( initialState, on( SongsApiActions.songsLoadedSuccess, (state, { songs }) => ({ ==.state, songs, isLoading: false, }) ), on(** **. */) ); export const featureName = 'songs'; songs.reducer.ts
14. songs.module.ts import { StoreModule } from '@ngrx/store'; import * as fromSongs from './songs.reducer'; @NgModule({ imports: [ StoreModule.forFeature( fromSongs.featureName, fromSongs.reducer ), ], }) export class SongsModule {} import { 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 reducer = createReducer( initialState, on( SongsApiActions.songsLoadedSuccess, (state, { songs }) => ({ ==.state, songs, isLoading: false, }) ), on(** **. */) ); export const featureName = 'songs'; songs.reducer.ts
15. import { 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 reducer = createReducer( initialState, on( SongsApiActions.songsLoadedSuccess, (state, { songs }) => ({ ==.state, songs, isLoading: false, }) ), on(** **. */) ); export const featureName = 'songs'; songs.reducer.ts songs.selectors.ts
16. import { 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 reducer = createReducer( initialState, on( SongsApiActions.songsLoadedSuccess, (state, { songs }) => ({ ==.state, songs, isLoading: false, }) ), on(** **. */) ); export const featureName = 'songs'; songs.reducer.ts import { createFeatureSelector, } from '@ngrx/store'; import * as fromSongs from './songs.reducer'; export const selectSongsState = createFeatureSelector<fromSongs.State>(fromSongs.featureName); songs.selectors.ts
17. import { 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 reducer = createReducer( initialState, on( SongsApiActions.songsLoadedSuccess, (state, { songs }) => ({ ==.state, songs, isLoading: false, }) ), on(** **. */) ); export const featureName = 'songs'; songs.reducer.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromSongs from './songs.reducer'; export const selectSongsState = createFeatureSelector<fromSongs.State>(fromSongs.featureName); export const selectSongs = createSelector( selectSongsState, (state) => state.songs ); export const selectActiveSongId = createSelector( selectSongsState, (state) => state.activeSongId ); export const selectIsLoading = createSelector( selectSongsState, (state) => state.isLoading ); songs.selectors.ts
18. createFeature
19. songs.reducer.ts import { createFeature } 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({ });
20. songs.reducer.ts import { createFeature } 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' });
21. 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(** **. */) ), });
22. 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;
23. 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.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) );
24. 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) );
25. Marko Stanimirović @MarkoStDev Thank You!