0

redux-observable を評価しようとしています。ドキュメントを調べただけで、非同期の叙事詩の読み込みを開始しようとしています。基本的にBehaviorSubjectのものの非同期使用を追加しようとするドキュメントからjsbinのフォークを作成しました。

http://jsbin.com/bazoqemiqu/edit?html,js,output

その「PING PONG」の例では、「OTHER」アクションを追加し、BehaviorSubject.next (ドキュメントで説明されているように) を使用してそのエピックを追加しました。ただし、この例を実行すると、PING アクションが起動され、その後に「OTHER」アクションのエンドレス ストリームが続きますが、PONG アクションは発生しません。これを確認するために、reduxLogger を追加しました。jsbin コンソールでは正しくレンダリングされないため、開発ツール コンソールで表示します。

私の質問は、私が間違っていることは何ですか? PONG アクションがディスパッチされないのはなぜですか?

4

1 に答える 1

4

あなたotherEpicは無限の「ループ」です（時間の経過とともに）

const otherEpic$ = action$ => 
  action$
    .delay(1000)
    .mapTo({ type: OTHER });

この叙事詩には、「アクションがまったく受信されたら、1000ミリ秒待ってから、タイプの別のアクションを発行するOTHER」という動作があります。store.dispatchそして、エピックが発行するアクションは他のアクションと同様に通常のサイクルを通過するため、最初のアクションPINGが受信されたOTHER後、1000 ミリ秒後に が発行され、同じエピックによって再帰的に受信され、さらに 1000 ミリ秒待ってから別の OTHERアクションが発行されます。 、永遠に繰り返します。

これが知られていたかどうかはわかりませんが、指摘したかったのです。

rootEpicが実行を開始する前、またはサブスクライブされる前next()の BehaviorSubject に入ります。epic$

BehaviorSubjects は最後に発行された値を保持し、誰かがサブスクライブするとすぐにそれを提供します。rootEpicはまだミドルウェアによって呼び出されてサブスクライブされていないため、初期値を置き換えているため、 のみが発行され、実行されます。otherEpicepic$.mergeMap

非同期/バンドル分割を使用する実際のアプリケーションでは、ミドルウェアが rootEpic をサブスクライブしepic$.next(newEpic)、.BehaviorSubject

その動作のデモは次のとおりです: http://jsbin.com/zaniviz/edit?js,output

const epic$ = new BehaviorSubject(combineEpics(epic1, epic2, ...etc));
const rootEpic = (action$, store) =>
  epic$.mergeMap(epic => {console.log(epic)
    return epic(action$, store)
  });

const otherEpic = action$ =>
  action$.ofType(PONG)
    .delay(1000)
    .mapTo({ type: OTHER });

const epicMiddleware = createEpicMiddleware(rootEpic);
const store = createStore(rootReducer,
  applyMiddleware(loggerMiddleware, epicMiddleware)
);

// any time AFTER the epicMiddleware
// has received the rootEpic
epic$.next(otherEpic);

ドキュメントには、この例で「しばらくしてから」と書かれていますが、今では十分に明確ではありません。これをさらに明確にしようと思います。

Webpack の分割で react-router を使用している場合は、エピックの非同期読み込みに関するこの他の質問も役立つ場合があります。require.enquire()

これらのいずれかをさらに明確にすることができるかどうか教えてください

于 2016-10-27T01:54:23.990 に答える