Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NgRx Feature Creator

NgRx Feature Creator

Marko Stanimirović

September 02, 2022
Tweet

More Decks by Marko Stanimirović

Other Decks in Programming

Transcript

  1. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★

    NgRx Team Member ★ Angular Belgrade Organizer ★ Hobby Musician ★ M.Sc. in Software Engineering
  2. export interface State { songs: Song[]; activeSongId: number | null;

    isLoading: boolean; } const initialState: State = { songs: [], activeSongId: null, isLoading: false, }; songs.reducer.ts
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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({ });
  12. 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' });
  13. 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(** **. */) ), });
  14. 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;
  15. 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) );
  16. 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) );