Angular ngrx状态不断被覆盖
我正在使用ngrx来维护我的应用程序状态 我有一个angularjs4应用程序,它有两个不同的模块,具有两个不同的还原器、效果等 一个用于身份验证,另一个用于获取电影列表。但我看到了第二个效应,它用它的值覆盖了全局应用程序状态 我如何防止这种情况 下面是我的身份验证模块中的状态定义Angular ngrx状态不断被覆盖,angular,ngrx,ngrx-store,ngrx-effects,Angular,Ngrx,Ngrx Store,Ngrx Effects,我正在使用ngrx来维护我的应用程序状态 我有一个angularjs4应用程序,它有两个不同的模块,具有两个不同的还原器、效果等 一个用于身份验证,另一个用于获取电影列表。但我看到了第二个效应,它用它的值覆盖了全局应用程序状态 我如何防止这种情况 下面是我的身份验证模块中的状态定义 import {User} from "../../models/user"; export interface State { user: User, isLoggedIn: boolean,
import {User} from "../../models/user";
export interface State {
user: User,
isLoggedIn: boolean,
errors: any[]
}
export const initialState: State = {
user: null,
isLoggedIn:false,
errors:[]
};
这是auth还原程序
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:[{}]};
}
}
验证模块定义
@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:[]
};
下面是电影州的定义
@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
};
从一个很棒的开发者那里得到了答案!我的减速器中没有默认状态!如下所示添加默认状态修复了该问题
switch (action.type) {
/* my actions */
default:
return state;
}
代码是感激添加一些代码,请让我知道如果你需要更多的信息。真的回答和代码是感激的。这个问题很有帮助