Ngrx：メタレデューサーとキャプチャ効果

Question

私はIStoreのtransactionコンセプトを追加しました。保留中の操作が保留されている私のIStoreに格納する手段を提供することは、直接的に意味します。それらが完了すると、それらは削除されます。

export interface IStore { 
    user: IUser; 
    txs: ITxRedux; 
} 

すべての私のレデューサーは似ています：

* reducer name: `'OPERATION'` 
* success reducer name: `'OPERATION_SUCCESS'` 
* failed reducer name: `'OPERATION_FAILED'` 

これらの減速の一部（のみがHTTPリクエストを必要とする）@Effectsを用いて撮影されています

@Effect({ dispatch: true }) 
userLogin$: Observable<Action> = this._actions$ 
    .ofType('USER_LOGIN') 
    .switchMap((action: Action) => 
    { 
     .... 
    }); 

現在、私のエフェクトはこのパターンを持っています：

return make_http_call 
    .map(_ => ({type: 'OPERATION_SUCCESS'}, payload: {...})) 
    .catch(_ => ({type: 'OPERATION_FAILED'}, payload: {...})); 

このように、エフェクトが呼び出されるか、完了するたびに、IStore.txsに"transaction"を追加または削除する方法をご希望です。私は"add a transaction into my IStore.txs"を言うとき、私はtransactionレデューサーを呼び出すことを意味：

public static ADD_TX = `ADD_TX`; 
private static addTx(txsRdx: ITxRedux, type, payload: ITx) { 
    const tx = payload; 

    return { 
     ids: [ ...txsRdx.ids, tx.id ], 
     entities: Object.assign({}, txsRdx.entities, {[tx.id]: tx}), 
    }; 
} 

public static REMOVE_TX = `REMOVE_TX`; 
private static removeTx(txsRdx: ITxRedux, type, payload) { 
    const tx: ITx = payload; 
    var entitiesTmp = {...txsRdx.entities}; 

    delete entitiesTmp[tx.id]; 
    return { 
     ids: txsRdx.ids.filter(id => tx.id != id), 
     entities: entitiesTmp 
    }; 
} 

私はメタレデューサーについて少し話を聞いてきましたが、私はかなり彼らは私の目標を得ることができるとしているしていないかどうか。

エレガントな方法で入手する方法はありますか？

Answer 1

遅く返信しますが、this postが便利です。 （そのポストからほとんど取ら）古典的な例は、ロギングメタ減速により、各アクション/状態変化を記録することです：

export function logging(reducer) { 

    return function loggingReducer(state, action) { 
    console.group(action.type); 

    // invoke following, "wrapped" reducer in the chain 
    const nextState = reducer(state, action); 

    console.log(`%c prev state`, `color: #9E9E9E`, state); 
    console.log(`%c action`, `color: #03A9F4`, action); 
    console.log(`%c next state`, `color: #4CAF50`, nextState); 
    console.groupEnd(); 

    // return wrapped reducer output 
    return nextState; 
    }; 

} 

メインアプリモジュールでは、あなたが持つ新しいlogging減速機工場を構成通常のcombineReducers減速機工場：

const appReducer = compose(logging, combineReducers)(reducers); 
//... 
StoreModule.provideStore(appReducer), 

その構文はそのブログの記事以来、最近ngrxのバージョンでは変更されているようだけで、StoreModuleとグローバルアプリの減速を設定するためWATCHOUT。

リモートAPI呼び出しをキャッチして呼び出すためのメタレデューサーの実装についてのインスピレーションを探しているのであれば、すでに作成されている同等のRedux用ミドルウェアをredux-api-middleware。 HTH