감속기가 반환 한 상태가 같은 모양을 따라야합니까?

Question

https://medium.com/front-end-hacking/an-intro-to-ngrx-effects-ngrx-store-with-angular-4-c55c4d1d5baf

https://github.com/aravindfz/ngrx-store-demo (코드)

이 튜토리얼을 바탕으로, 나는. 상태 감속기가. 난 항상 만회 다음 응용 프로그램 상태를 반환하는 응용 프로그램 전체 감속기해야한다 생각 반환해야와 혼란 스러워요 그러나 이 가이드 필터링을 수행하는 데 사용되는 상태를 반환이 authorFilter 감속기를 갖는다.

// reducer: authorFilter 
export const authorFilter = (state = blogs => blogs, action: any) => { 
    switch (action.payload && action.payload.type) { 
     case 'All': { 
      return blogs => blogs; 
     } 
     case 'Other': { 
      return blogs => blogs.author === action.payload.value; 
     } 
     default: { 
      return state; 
     } 
    } 
}; 

메인 만회

때

그런 다음 다른 상태가 다른 감속기 (블로그 및 authorFilter)에 반환 이후

ngOnInit() { 
    this.blogs$ = Observable.combineLatest(
     this.store.select('blog'), 
     this.store.select('authorFilter'), 
     (blogs: any, authorFilter: any) => { 
     return blogs.data ? blogs.data.filter(authorFilter) : []; 
     } 
    ); 

    this.loadBlogs(); 
    } 

    ngOnChanges() { 
    } 

    loadBlogs() { 
    this.store.dispatch(this.blogActions.loadBlogs('All')); 
    } 

주요 구성 요소에, 나는 다른 저장소로 다음 고려해야한다? 같은 모양을 공유하는 응용 프로그램 상태라면 상태라고 생각했습니다.

Answer 1

단순한 응용 프로그램의 경우 하나의 축소 기가 있지만 크기가 더 복잡한 응용 프로그램의 경우 상태를 세분화하는 것이 좋습니다. 조각을 만들고 함께 구성하십시오. 그래서 각 감속기는 그것의 상태에 대한 책임이 있습니다. 그리고 감속기를 함께 구성하는 함수가 있습니다.

다음은 내가 익숙했던 패턴을 사용하는 작은 예제입니다.이 패턴은 작동 방식이 더 명확합니다. 하루가 끝나면 하나의 중앙 개체 만 남습니다.

// Part One 

export interface PartOneState { 
    a: string, 
}; 

export const partOneInitialState: PartOneState = { 
    a: '', 
}; 

export const SAY_HI = 'SAY_HI'; 
export class SayHi implements Action { 
    readonly type = SAY_HI; 
} 

export const SAY_BYE = 'SAY_BYE'; 
export class SayBye implements Action { 
    readonly type = SAY_BYE; 
} 

export const partOneReducer = (state: PartOneState = partOneInitialState, 
           action): PartOneState => { 
    switch (action.type) { 
     case SAY_HI: 
      return { a: 'hi' }; 
     case SAY_BYE: 
      return { a: 'bye' }; 

     default: 
      return state; 
    } 
} 

// Part Two 

export interface PartTwoState { 
    b: number; 
}; 

export const partTwoInitialState: PartTwoState = { 
    b: 0, 
}; 

export const ADD = 'ADD'; 
export class Add implements Action { 
    readonly type = ADD; 
} 

export const SUBTRACT = 'SUBTRACT'; 
export class Subtract implements Action { 
    readonly type = SUBTRACT; 
} 

export const partTwoReducer = (state: PartTwoState = partTwoInitialState, 
           action): PartTwoState => { 
    switch (action.type) { 
     case ADD: 
      return { b: state.b + 1 }; 
     case SUBTRACT: 
      return { b: state.b - 1 }; 

     default: 
      return state; 
    } 
} 

// Compose them together 


export interface AppState { 
    partOne: PartOneState, 
    partTwo: PartTwoState 
} 

export const reducer: ActionReducerMap<AppState> = { 
    partOne: partOneReducer, 
    partTwo: partTwoReducer 
}; 



// In your app.module.ts file... 
{ 
    // ... 
    imports: [ 
     // ... 
     StoreModule.forRoot(reducer), 
     // ... 
    ] 
} 
`