Я использую ngrx для поддержания состояния моего приложения.
У меня есть приложение angularjs4 с двумя разными модулями, которые имеют два разных редуктора, эффекты и т. Д.
Один предназначен для аутентификации, а другой - для получения списка фильмов. Но я вижу, какой бы эффект ни вызывали, он перезаписывает глобальное состояние приложения со своим значением.
Как мне предотвратить это?
Вот определение состояния в моем модуле аутентификации
import {User} from "../../models/user";
export interface State {
user: User,
isLoggedIn: boolean,
errors: any[]
}
export const initialState: State = {
user: null,
isLoggedIn:false,
errors:[]
};
Это редуктор аутентификации
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
@NgModule({
imports: [
CommonModule,
MdToolbarModule,
EffectsModule.forFeature([AuthEffects]),
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
],
exports:[AppRoutingModule],
declarations: [
LoginComponent
],
providers: [AuthService]
})
Ниже приведено определение состояния фильмов.
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:[]
};
Редуктор фильмов
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 {};
}
}
наконец фильм модуль
@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 {
}
Состояние корневого приложения
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
};
наконец модуль приложения
@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 {
}