Reduxの、観察可能なエラー

Question

私はこのようなファイルの叙事詩（Reduxの-観測可能）があります。

export const intervalChartEpic = (action$, store) => 
action$.ofType(FETCHING_CHART_DATA_ONE_DAY_SUCCESS) 
    .filter(() => (store.getState().currentPeriod === PERIOD_ONE_DAY)) 
    .mergeMap(() => Observable 
    .interval(10000) 
    .takeUntil(store.getState().currentPeriod !== PERIOD_ONE_DAY) 
    .switchMap(() => ajax.getJSON(updateChartOneDayUrl(store)) 
    .map(response => fetchIntervalChartDataSuccess(response)) 
    .catch((err) => { 
     console.log('============Position 1============'); 
     console.log(err); 
     return Observable.of(fetchChartDataFailure(err)); 
    }) 
    ) 
    .catch((err) => { 
     console.log('============Position 2============'); 
     console.log(err); 
     return Observable.of(fetchChartDataFailure(err)); 
    }); 
); 

をそして、それは

"You provided 'false' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable." 

よう エラーで出てきます

位置2のエラー、それはswitchMap() funtionでエラーを意味します。なぜ、私の体はここで助けてくれるのでしょうか？

Answer 1

問題があなたのswitchMapと、実際にはありませんが、それはだあなたのtakeUntil

.takeUntil(store.getState().currentPeriod !== PERIOD_ONE_DAY) 

あなたはtakeUntil、which expects an Observableに引数としてブール値を渡しています！

公共takeUntil（通知：観察可能）：観察可能

実際には私がこれまでをした特定の値にストアの状態が変化するまでの流れを取るためにかなり複雑な方法は、ありますがそれらが反パターンであることを発見した。代わりに、アクションを聞いてください。そのアクションは、その状態を変更する意図を表しています。

.takeUntil(
    action$ 
    .ofType(CHANGE_PERIOD) 
    .filter(action => action.currentPeriod !== PERIOD_ONE_DAY) 
) 

---

あなたが本当に代わりに状態のストリームを取得したい場合は、それを行うための一つの方法は、それを作成し、すべてのあなたの叙事詩にそれを注入することです。これは、我々がObservable.from(store)を作成する最後の部分は、理由再来のストアがサポートされcreateEpicMiddlewareのdependencies設定オプション

const state$ = new BehaviorSubject(); 

const store = createStore(
    applyMiddleware(
    createEpicMiddleware(epic, { 
     dependencies: { state$ } // <-- this is important 
    }) 
) 
); 

Observable.from(store).subscribe(state$); 

を使用することができます依存関係を注入するには、Reduxの-観察できるの最新バージョンが必要ですfurther documented here

Symbol.observable - あなたは単に「それは私たちが彼らと一緒に働いたからうまくいく」と考えることができます。

しかし、あなたはそれが本当にいっぱいストアオブジェクトではないので、これはを動作しませんあなたの叙事詩は、2番目の引数として受け取りますが店にObservable.from(store)を使用するように誘惑されるかもしれません！ Read more about why here

state$の新しく注入されたストリームは、今、あなたの叙事詩

// third argument is object of dependencies vvvvvvvv 
const intervalChartEpic = (action$, store, { $state }) => 

の三番目の引数の対象になりますそして、あなたはこのようにそれを使用することができます。

.takeUntil(
    state$.filter(state => state.currentPeriod !== PERIOD_ONE_DAY) 
) 

それはどのアプローチ不明ですより正確です。状態の流れは確かに簡単ですが、カップリングとタイミングの問題があり、実際にそれを還元的に観測することができませんでした。私はそれがフットガンであることをほとんど心配しています - 悪いことをするのはとても簡単です。