Creating new config to set Title of Loklak Webpages
For a Search Engine and Progressive Web Application (PWA) like Loklak, it is important to change the title of each web page with the appropriate query term or configuration of the current active page (A great title can result in higher click-throughs and more traffic to the site, and hence its followed by search engines like Google). For solving this problem, I am writing this blog post which creates a new configuration to change the title dynamically across the whole project by using just one Action thereby maximizing reusability of the code and minimizing duplication. Create Action for title We would need to create a new separate title action following the architecture in loklak. Create a new title.ts file under Actions with the following code: import { Action } from ‘@ngrx/store’; export const ActionTypes = { SET_TITLE: ‘[Title] SET TITLE’ }; export class SetTitleAction implements Action { type = ActionTypes.SET_TITLE; constructor (public payload: string) { } } export type Actions = SetTitleAction; Create reducer for title For accessing the current title of the webpage, it is important to create a reducer function for the title following the pattern in loklak. import * as titleAction from ‘../actions/title’; export interface State { title: string; } export const initialState: State = { title: '', }; export function reducer(state: State = initialState, action: titleAction.Actions): State { switch (action.type) { case titleAction.ActionTypes.SET_TITLE: { const titleObt: string = action.payload; return Object.assign({}, state, { title: titleObt }); } default: { return state; } } } export const getTitle = (state: State) => state.title; Create selector and add reducer function to root reducer The title can be accessed from the current state from store when it would be added to the root state and reducer. Firstly import the title reducer created above and define the title property in root reducer and create a selector for the same. import * as fromTitle from ‘./title’; export interface State { … title: fromTitle.State; } export const reducers: ActionReducerMap<State> = { … title: fromTitle.reducer }; export const getTitleState = (state: State) => state.title; export const getTitle = createSelector(getTitleState, fromTitle.getTitle); Create Effect to change actual title Now comes the actual part which controls the changing of webpage title using ‘Title’ property of Platform-Browser. Create a new title.effects.ts file under effects using pattern in loklak. import { Injectable } from ‘@angular/core’; import { Title } from ‘@angular/platform-browser’; import { Effect, Actions, ofType } from ‘@ngrx/effects’; import { Observable } from ‘rxjs’; import { map } from ‘rxjs/operators’; import * as titleAction from ‘../actions/title’; @Injectable() export class SetTitleEffects { @Effect({ dispatch: false }) resetTitle$: Observable<void> = this.actions$ .pipe( ofType( titleAction.ActionTypes .SET_TITLE ), map((action) => { const title = action[‘payload’]; this.titleService .setTitle(title); }) ); constructor( private actions$: Actions, private titleService: Title ) { } } Here the ‘payload’ actually contains the query searched by the user, which will be used update the title. Note: Before adding a new Effect, the old Effect needs to be removed. After creating the Effect, add it into app.module.ts and…
