As I delve into the world of ngrx, I find myself struggling to fully understand and implement it effectively within my application.
Recently, I integrated ngrx version 8.3 into my project in hopes of organizing my state management efficiently.
My goal is to have a structured root state along with separate feature states for each component. However, I encountered an issue where my selector at the root level never seemed to trigger.
Here are the actions defined...
// actions
import { createAction, union } from '@ngrx/store';
import { SecurityTokensState } from './app.reducer';
export const setUrl = createAction(
'[App url] ',
(payload: string) => ({ payload })
);
export const setTokens = createAction(
'[App setSecurityTokens] ',
(payload: SecurityTokensState) => ({ payload })
);
export const actions = union({
setUrl,
setTokens
});
export type ActionsUnion = typeof actions;
And here are the reducers...
import * as rootActions from './app.actions';
import { createReducer, on } from '@ngrx/store';
/** Top level state */
export interface State {
/** State related to Auth */
tokens: SecurityTokensState;
/** General / root app state (eg configuration) */
app: AppState
}
/** App wide general state */
export interface AppState {
url: string;
}
/** Security token state */
export interface SecurityTokensState {
token: string,
refreshToken: string;
}
const initialState: State = { tokens: undefined, app: { url: ""} };
export function rootReducer(state: State, action: rootActions.ActionsUnion): State {
return reducer(state, action);
}
const reducer = createReducer(
initialState,
on(rootActions.setTokens,
(state, { payload }) => ({ ...state, tokens: payload })
),
on(rootActions.setUrl,
(state, { payload }) => ({ ...state, app: updateUrl(state, payload)}))
)
/** Helper to update the nested url */
const updateUrl = (state: State, payload: string): AppState => {
const updatedApp = { ...state.app };
updatedApp.url = payload;
return updatedApp;
}
I also created the following selector...
import { createFeatureSelector, createSelector } from "@ngrx/store";
import { AppState } from './app.reducer';
const getAppState = createFeatureSelector<AppState>('app');
export const getUrl = createSelector(
getAppState,
state => state.url
);
In my app.module file...
StoreModule.forRoot(rootReducer),
Within a component...
import * as rootSelectors from '../state/app.selectors';
....
public onUrlBlur(ev : any): void {
let val = ev.target.value;
this.store.dispatch(rootActions.setUrl(val));
}
For subscription updates...
this.subs.sink =
this.store.pipe(select(rootSelectors.getUrl)).subscribe(url => {
this.urlEntered = url
});
Additionally, in one of my feature modules...
StoreModule.forFeature('myfeature1', {})
Even though I see the blur function being called and results in the redux dev tools, when I check the state, I only see a limited view.
https://i.stack.imgur.com/4twVa.png
I am puzzled as to why my root state does not seem to be properly integrated, and unable to identify what exactly has gone wrong.
Update
I added a similar example that encounters the same issue here
After running the code and checking the console, I noticed the following error message...
The feature name "appRoot" is not found in the state, hence createFeatureSelector cannot access it. Make sure it is imported in a loaded module using StoreModule.forRoot('appRoot', ...) or StoreModule.forFeature('appRoot', ...). If the
I am unsure how to properly utilize
StoreModule.forRoot(rootReducer),The error recommends using a string like
StoreModule.forRoot('app', rootReducer),If I try:
StoreModule.forRoot({appRoot: rootReducer}),
This results in a nested state:
https://i.stack.imgur.com/Y0wW6.png
Just passing the reducer without the object wrapper:
StoreModule.forRoot(rootReducer),
Doesn't show any state:
https://i.stack.imgur.com/84VtH.png
Most examples out there focus on feature states, however, I have several settings that are exclusively application-wide, outside of a feature module's scope.
Furthermore, since this state doesn't belong to a feature module, I'm uncertain whether I should use createFeatureSelector:
const getAppState = createFeatureSelector<AppState>('appRoot');