Implement translatable UI in a Single Page Application when working with ngRx

I am currently working on an Angular SPA that supports multiple languages and relies on ngRx for state management.

Although the application state is handled by ngRx, the current language is stored in the database. The translated resources come from outside the store (resource files read using the @ngx-translate library).

Relevant code parts are shown below.

Language change

public languageChange(value: TranslationLanguage): void {
	this.store.dispatch(UpdatePreferredCultureRequestedAction({ value: value.cultureName }));
	this.translate.use(value.cultureName);
}

Culture change handling

Current user culture is changed in a pessimistic way (server side must end successfully) and then all UI related components should refresh their content based on the new language:

updatePreferredCulture$ = createEffect(() => this.actions$.pipe(
	ofType(UpdatePreferredCultureRequestedAction),
	concatMap(action => {
		return this.layoutInfoService.updatePreferredCulture(action.value).pipe(
			catchError(err => {
				this.validation.handleAndDisplayError(err);
				return of(Constants.defaultCultureName);
			})
		);
	}),
	map((culture: string) =>  UpdatePreferredCultureLoadedAction({ value: culture }))
));

updatePreferredCulture(preferredCulture: string): Observable<string> {
	const http$ = this.http
		.put("/api/preferred-culture", { value: preferredCulture })
		.pipe(
			catchError(err => this.validationService.handleAndDisplayError(err)),
			map(_ => preferredCulture)
		);
	return http$;		
}

The application state is also altered to know about the new culture:

on(UpdatePreferredCultureLoadedAction, (state: LayoutInfoState, payload: { value: string }) => {
	return { ...state, info: {  ...state.info, preferredCulture: payload.value } };
})

However, each part of the application that relies on translation must be explicitly notified (by dispatching an explicit "reload" action):

questionnaireListRequested$ = createEffect(() => this.actions$.pipe(
	ofType(UpdatePreferredCultureLoadedAction),
	map(_ => QuestionnaireListRequestedAction())
));

homeHistoryRequested$ = createEffect(() => this.actions$.pipe(
	ofType(UpdatePreferredCultureLoadedAction),
	map(_ => HistoryQuestionnaireShortListRequestedAction())
));

historyRequested$ = createEffect(() => this.actions$.pipe(
	ofType(UpdatePreferredCultureLoadedAction),
	map(_ => HistoryQuestionnaireListRequestedAction())
));

// other effects are expected to be defined here as the application grows

This last part concerns me a little bit as it creates some coupling between translation-related effects and everything else.

Any thoughts about improving the design?

posted about 2 years ago

CC BY-NC-SA 4.0

Alexei‭

5003 reputation 112 101 690 486