ngrx 状态不断被覆盖

Question

我正在使用 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:[]
};

这是 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 模块定义

@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 {
}

Answer 1

从 Glitter 的一位出色的开发人员那里得到了答案！我的减速器中没有默认状态！如下添加默认状态解决了这个问题。

switch (action.type) {
  /* my actions */

  default:
    return state;

}

ngrx 状态不断被覆盖

ngrx state keeps getting overwritten

angular

ngrx

ngrx-store

ngrx-effects