L'état ngrx ne cesse d'être écrasé

Question

J'utilise ngrx pour maintenir mon état d'application.

J'ai une application angularjs4 avec deux modules différents ce qui a deux effets réducteurs différents, etc.

On est pour l'authentification et une autre est d'obtenir la liste des films. Mais je vois quel que soit l'effet appelé second il écrit l'état de l'application globale avec sa valeur.

Comment puis-je empêcher cela?

Voici la définition de l'état dans mon module auth

import {User} from "../../models/user"; 

export interface State { 
    user: User, 
    isLoggedIn: boolean, 
    errors: any[] 
} 

export const initialState: State = { 
    user: null, 
    isLoggedIn:false, 
    errors:[] 
}; 

Ceci est le réducteur 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:[{}]}; 

    } 
} 

définition du module auth

@NgModule({ 
    imports: [ 
    CommonModule, 
    MdToolbarModule, 
    EffectsModule.forFeature([AuthEffects]), 
    AngularFireModule.initializeApp(environment.firebase), 
    AngularFireAuthModule 

    ], 
    exports:[AppRoutingModule], 
    declarations: [ 
     LoginComponent 
    ], 
    providers: [AuthService] 
}) 

Voici l'état des films définition

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:[] 
}; 

Film Réducteur

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

enfin module film

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

état app Root

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 
}; 

enfin le module app

@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

Vous avez la réponse d'un développeur génial dans Glitter! Je n'avais pas d'état par défaut dans mes réducteurs! L'ajout de l'état par défaut comme suit a corrigé le problème.

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

    default: 
    return state; 

}