Reputation: 433
I am using ngrx to maintain my application state.
I have a angularjs4 application with two different modules that which has two different reducers,effects etc.
One is for authenticate and another is to get list of movies. But I see whichever effect is called second it over writes the global app state with its value.
How do I prevent this?
Here is the state definition in my auth module
import {User} from "../../models/user";
export interface State {
user: User,
isLoggedIn: boolean,
errors: any[]
}
export const initialState: State = {
user: null,
isLoggedIn:false,
errors:[]
};
This is the auth reducer
import * as fromAuth from './auth.state';
import * as AuthActions from './auth.actions';
export function authReducer(state = fromAuth.initialState, action: AuthActions.ALL){
console.log('authReducer', action, state);
switch (action.type) {
case AuthActions.LOGIN_WITH_GOOGLE:
return {...state};
case AuthActions.LOGIN_WITH_FACEBOOK:
return {...state};
case AuthActions.LOGIN_WITH_TWITTER:
return {...state};
case AuthActions.LOGOUT:
return {...state, user: null, isLoggedIn:false};
case AuthActions.LOGIN_SUCCESSFUL:
return {...state};
case AuthActions.LOGIN_FAILED:
return {...state, errors:[{}]};
case AuthActions.REGISTER_USER:
return {...state};
case AuthActions.USER_REGISTRATION_SUCCESSFUL:
return {...state, user: action.payload, isLoggedIn:true};
case AuthActions.USER_REGISTRATION_FAILED:
return {...state, errors:[{}]};
}
}
auth module definition
@NgModule({
imports: [
CommonModule,
MdToolbarModule,
EffectsModule.forFeature([AuthEffects]),
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
],
exports:[AppRoutingModule],
declarations: [
LoginComponent
],
providers: [AuthService]
})
Below is the movies state definition
import {Movie} from "../../models/movie";
export interface State{
all:Movie[],
selectedMovie:Movie,
isLoading:boolean,
errors:any[]
}
export const initialState: State = {
all:[],
selectedMovie:null,
isLoading:false,
errors:[]
};
Movie Reducer
import * as MovieActions from './movies.actions';
import * as fromMovie from './movies.state';
import * as _ from 'lodash';
export function movieReducer(state = fromMovie.initialState, action:MovieActions.ALL) {
console.log('movieReducer', action, state);
switch (action.type) {
case MovieActions.GET_ALL_MOVIES:
return _.assign({}, state, {loading:true});
// return {...state, loading:true};
case MovieActions.GET_MOVIES_BY_TYPE:
return _.assign({}, state, {loading:true});
case MovieActions.GET_MOVIES_SUCCESS:
return _.assign({}, state,{all: action.payload} ,{loading:false});
// return {...state, all: action.payload, loading:false };
case MovieActions.SELECT_MOVIE:
return _.assign({}, state,{selectedMovie: action.payload} ,{loading:false});
// return {...state, selectedMovie:action.payload};
case MovieActions.UPDATE_MOVIE:
return {};
case MovieActions.DELETE_MOVIE:
return {};
}
}
finally movie module
@NgModule({
imports: [
CommonModule,
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,
HttpModule,
MdCardModule,
MdButtonModule,
RouterModule,
EffectsModule.forFeature([MoviesEffects])
],
exports: [
AppRoutingModule
],
declarations: [
MoviesListComponent,
WatchMovieComponent,
EditMovieComponent,
ListFromObjectPipe
],
providers: [MovieApiService]
})
export class MoviesModule {
}
Root app state
import * as fromMoviesReducer from '../movies/store/movies.reducer';
import * as fromMoviesState from '../movies/store/movies.state';
import * as fromAuthReducer from '../auth/store/auth.reducer';
import * as fromAuthState from '../auth/store/auth.state';
import { ActionReducerMap } from '@ngrx/store';
export interface AppState {
movies: fromMoviesState.State;
user:fromAuthState.State;
}
export const appReducers : ActionReducerMap<any> = {
movies: fromMoviesReducer.movieReducer,
user: fromAuthReducer.authReducer
};
finally app module
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
TabsComponent
],
imports: [
BrowserModule,
MdToolbarModule,
MdTabsModule,
BrowserAnimationsModule,
MoviesModule,
ChatModule,
GamesModule,
AuthModule,
AppRoutingModule,
MdButtonModule,
StoreModule.forRoot(appReducers),
EffectsModule.forRoot([]),
StoreDevtoolsModule.instrument({
maxAge: 25 // Retains last 25 states
})
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Upvotes: 2
Views: 1227
Reputation: 433
Got the answer from an awesome developer in Glitter! I didn't have default state in my reducers! Adding default state as follows fixed the issue.
switch (action.type) {
/* my actions */
default:
return state;
}
Upvotes: 15