Following some minor changes to my application, I encountered an issue with my ngrx store not loading properly. While most of the store properties are displaying as expected and even fetching API results through their reducers, I am noticing that a crucial state property uiState is missing.
I have tried reverting back the changes, restarting my browser, terminal, clearing cache and local storage, and even rebooting my computer. However, the uiState continues to be absent from my store, and its reducer is not being invoked. Could this possibly be related to an Angular CLI or Webpack memory glitch? If so, how can I resolve this memory issue?
https://i.sstatic.net/sqzQO.png
This is the desired structure of my state:
export interface AppState {
uiState: UIState;
foodStaging: $DietEntryMap;
recipeBuilder: RecipeBuilder;
dbData: MongoData;
}
And here is how my reducers are set up:
const reducers = {
uiState: uiStateReducer,
recipeBuilder: recipeReducer,
foodStaging: stagingReducer,
dbData: dbDataReducer
};
const developmentReducer: ActionReducer<AppState> =
compose(
storeFreeze,
storeLogger(loggerOptions),
localStorageSync(['dbData'], true),
combineReducers)
(reducers);
const productionReducer: ActionReducer<AppState> =
compose(localStorageSync(['dbData']), combineReducers)(reducers);
export function storeReducer(state: AppState, action: any) {
if (environment.production) return productionReducer(state, action);
else return developmentReducer(state, action);
}
The UiState reducer implementation is as follows:
export function uiStateReducer(state: UIState = INITIAL_UI_STATE, action: UiActions): UIState {
switch (action.type) {
// handle actions
}
}
INITIAL_UI_STATE remains valid