NGRX Tutorial - Index Reducer

ngrx-example-index-reducer.ts

// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac

import {
  createSelector,
  createFeatureSelector,
  ActionReducerMap,
} from '@ngrx/store';


import * as fromAuth from '(auth reducer)';
import * as fromPermission from '(permission reducer)';


export interface TeamState {
  auth: fromAuth.State;
  permission: fromPermission.State;
  // More "States" relates to Auth workflow can be added here
}


export const reducers: ActionReducerMap<TeamState> = {
  auth: fromAuth.reducer,
  permission: fromPermission.reducer
};


// Here is the best part for using NGRX in production
// By defining the "Selector", app can call and get exactly combined data it required

// `createFeatureSelector` is for selecting a "Type" (TeamState)
// When reuqesting whole "Team State", the app can call this const directly
export const selectTeamState = createFeatureSelector<TeamState>('team');


// Auth and Permission selectors are created for using individually needs.
export const selectAuthState = createSelector(
	selectTeamState,
    (state: TeamState) => state.auth,
)

export const selectPermissionState = createSelector(
	selectTeamState,
    (state: TeamState) => state.permission,
)

// Declaring useful function utlizing with the selector.
// Can be regarded as the API

// Sorry for not providing the "Permission" demo code, but I think you can understand what it should do.
export const getUserPermission = createSelector(
	selectPermissionState,
    fromPermission.getPermissions
);

export const getAccessibility = createSelector(
	selectPermissionState,
    fromPermission.isAccessible
);

export const getUserAuthStatus = createSelector(
	selectAuthState,
    fromAuth.isAuthenticated
)

export const getUserName = createSelector(
	selectAuthState,
    fromAuth.getUserName
)

export const getAuthRisk = createSelector(
	selectAuthState,
    fromAuth.isRisky
)