2016-11-08 12 views
2

グローバル状態を設定し、その状態にもグローバル状態以外の場所にデータを要求します。あなたは私たちがへの呼び出しを派遣している見ることができるように角2は、特定の状態を更新する副作用としてグローバル状態を更新します。

@Effect() models$: Observable<Action> = this.actions$ 
    .ofType(GET_MODELS) 
    .do(() => this.store.dispatch({type: 'SET_LOADING_STATE', payload: true})) 
    .switchMap(() => this.modelsApi.getModels()) 
    .map(models => ({type: SET_MODELS, payload: models})) 
    .do(() => this.store.dispatch({type: 'SET_LOADING_STATE', payload: false})) 
    .catch((err: any) => Observable.of({type: GET_FAILURE, payload: {error: err}})) 

私は(models.effects.ts)この効果を呼んでいる:

@Effect() models$: Observable<Action> = this.actions$ 
    .ofType(GET_MODELS) 
    .switchMap(() => this.modelsApi.getModels()) 
    .map(models => ({type: SET_MODELS, payload: models})) 
    .catch((err: any) => Observable.of({type: GET_FAILURE, payload: {error: err}})) 

今、私が何をしたいのか、このようなものですglobalReducer(​​):THAを意味するだろう

export const GlobalReducer: ActionReducer<any> = (state: IGlobalStorage = {isLoading: false}, action: Action) => { 

    switch(action.type) { 

    case SET_LOADING_STATE: return Object.assign({}, state, { 
     isLoading: action.payload 
    }); 

    default: return state; 
    } 
} 

t http要求を行う前と後に、グローバル状態isLoadingを更新します。しかし、このソリューションは、厄介で、効果を破るという単純な事実のために機能しません(何らかの理由で、私は効果内でディスパッチを呼び出すためだと思います)。

SET_LOADING_STATEを聞いてglobalReducerを呼び出して、models$エフェクトに直接影響させるのではなく、別のエフェクトを作成することをお勧めします。

global.effects.ts内から)このような何か:

@Effect() loadingState$: Observable<Action> = this.actions$ 
    .ofType(SET_LOADING_STATE) 
    .do(() => ({type: SET_LOADING_STATE, payload: thePayloadThatWasSent})) 

しかし、それとの2つの問題があります。

  1. 私が実際に送信されたペイロードにアクセスする方法がわからないが。
  2. models$エフェクトからそのエフェクトを呼び出す方法がわかりません。

私は全体として、私が欲しいものを達成する方法を本当に混乱させています。私が見つけることができた限り、この例はありません。

あなたはこの画像を見れば、私はmodelsを更新するときglobal.isLoadingを更新する:

redux dev tools

私が欲しいものを達成するための最良の方法だろうか?

答えて

3

中央の場所にisLoadingインジケータを格納することは、エラー情報でときどき行われるのと同様です。 1つのsolution for storing a central errorには、アクションのタイプを無視し、それらにerrorプロパティが含まれているかどうかだけを調べる減速機を使用することが含まれます。

エフェクトのアクションタイプに適した命名規則を採用する場合は、isLoadingと同じことを行うことができます。

一つの可能​​性のある命名スキームは次のようになります。

SOME_ACTION_REQUEST 
SOME_ACTION_RESPONSE 
SOME_ACTION_ERROR 

、このような方式では、以下の減速は、アクションタイプを調べるでしょうし、それに応じてisLoading状態を設定します。

ため boolean値を使用して
export function isLoadingReducer(state: boolean = false, action: Action): boolean { 

    if (/_REQUEST$/.test(action.type)) { 
     return true; 
    } else if (/(_RESPONSE|_ERROR)$/.test(action.type)) { 
     return false; 
    } else { 
     return state; 
    } 
} 

isLoadingでは、非同期エフェクトが同時に発生しないと想定しているため、問題が発生した場合は、カウンタを使用してカウンタを使用することができます。

このように配線すると、isLoadingインジケータは個々のエフェクトについて何も知る必要はなく、その逆もありません。

関連する問題