Search code examples
ngrxangular8

Hot to fix ngrx auto overrite all another stores when dispach any


I need help whit Angular ngRx store. I spend couple days for this, but I can't figure out((

I have 2 store in my app and when i dispatch one of them (store.dispatch(new LoadProperties() )) my previous value from another store overrated

this my effects, requcers and app.module

recipes.effects.ts


    @Effect() loadRecipes$ = this.dataPersistence.fetch(fromRecipes.LOAD_RECIPES, {
    run: (action: LoadRecipes, state: RecipesState) => {
      return this.recipesService.getRecipes()
        .pipe(map((res: Recipe[]) => new LoadRecipesSuccess(res)));
    },
    onError: (action: LoadRecipes, error) => {
      this.toaster.errorSnackBar(error.statusText, 'Cant fetch categories');
      return of(new LoadRecipesError(error));
    }
  });

properties.effects.ts

@Effect() loadProperties$ = this.dataPersistence.fetch(fromProperties.LOAD_PROPERTIES, {
    run: (action: LoadProperties, state: PropertiesState) => {
      return this.propertiesService.getProperties()
        .pipe(map((res: Property[]) => new LoadPropertiesSuccess(res)));
    },
    onError: (action: LoadProperties, error) => {
      this.toaster.errorSnackBar(error.statusText, 'Cant fetch properties');
      return of(new LoadPropertiesError(error));
    }
  });
  export interface AppState { recipes: fromRecipes.RecipesState; properties: fromProperties.PropertiesState;
}



imports: [
SharedModule,
BrowserModule.withServerTransition({appId: 'my-app'}),
HttpClientModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
StoreModule.forRoot(fromApp.appReducer),
EffectsModule.forRoot(fromApp.appEffects),
StoreDevtoolsModule.instrument({ maxAge: 10 }),
NxModule.forRoot()
...]

upd this is recipe reducer

Hey there! recipes reducers

witch (action.type) {

  case RecipesActions.LOAD_RECIPES:
    return {
      ...state,      // the incoming state
      loading: true  // turn loading indicator on
    };
  case RecipesActions.LOAD_RECIPES_SUCCESS:
    return {
      ...state,             // the incoming state
      recipes: action.payload,
      loaded: true,         // recipes were loaded
      loading: false,       // turn loading indicator off
    };
  case RecipesActions.LOAD_RECIPES_ERROR:
    return {
      ...state,        // the incoming state
      loaded: false,   // the recipes were loaded
      loading: false,  // turn loading indicator off
    };

this is properties.reducer

switch (action.type) {

case PropertiesActions.LOAD_PROPERTIES:
  return {
    ...state,      // the incoming state
    loading: true  // turn loading indicator on
  };
case PropertiesActions.LOAD_PROPERTIES_SUCCESS:
  return {
    ...state,             // the incoming state
    properties: action.payload,
    loaded: true,         // properties were loaded
    loading: false,       // turn loading indicator off
  };
case PropertiesActions.LOAD_PROPERTIES_ERROR:
  return {
    ...state,        // the incoming state
    loaded: false,   // the properties were loaded
    loading: false,  // turn loading indicator off
  };

Solution

  • Seems like the reducers don't have a default case, which it should have otherwise the state will be undefined.

    switch (action.type) {
       ... other cases ...
    
       default:
         return state;
    }