Redux Observable：チェーンの後半部分でaction.payloadを使用する方法？

Question

私はこの問題に遭遇して、action.payloadにさらにアクセスしたいと思っています。しかしそれまでにmergeMapに引き渡された議論はすでに何かに変更されています。自分の行動を考えると

は次のようになります。

{ 
    type: BUY_GEMS, 
    payload: { value: 123, productIdentifier: "ABC123" } 
} 

そしてこの叙事詩：

function purchaseGems(action$, store) { 
    return action$ 
    .ofType(BUY_GEMS) 
    .mergeMap(action => { 
     const { productIdentifier } = action.payload; // <-------- works because it's the first mergeMap in this sequence 
     return Observable.fromPromise(
     // Some promise call 
    ).catch(error => Observable.of(buyGemsRejected(error))); 
    }) 
    .mergeMap(action => { 
     const { value } = action.payload; // <----------- doesn't work because "action" is now just the response of the Promise above. 
     ... 
    }); 
} 

私はこれをどのように行うのでしょうか？

Answer 1

このトリックは、アクションが利用可能なクロージャの内側に2番目のmergeMapを配置することです。実際、もしあなたがそれにアクセスする必要がなくても、私は一般的に、このパターンをredux-observableで推薦することで、単一のトップレベルマージストラテジ演算子（mergeMap、switchMapなど）の中のObservableチェーンを隔離します。これは、より簡単で簡単なエラー分離（追加された場合）です。

function purchaseGems(action$, store) { 
    return action$ 
    .ofType(BUY_GEMS) 
    .mergeMap(action => { 
     const { productIdentifier } = action.payload; 
     return Observable.fromPromise(somePromise) 
     .catch(error => Observable.of(buyGemsRejected(error))) 
     .mergeMap(response => { 
      const { value } = action.payload; 
      // ... 
     }); 
    }); 
} 

---

あなたの例で、私はちょうど擬似コードであるので、私は他の読者のために、より明確にするためObservable.fromPromise(somePromise)に追随仮定Observable.fromPromise()を含んでいました。