私はここで説明されている「registerEpic」ユーティリティです: Is it an effective practice to add new epics lazily within react-router onEnter hooks?
私たちのコードは等形である必要がありますが、サーバー側では、アクションが最初にトリガーされ、すべてがうまくいきます。ただし、アクションが 2 回トリガーされると、エピックはそのアクションの 2 つのコピーを取得するようです。これが私のコードです：
export const fetchEpic = (action$, store) =>
action$.ofType("FETCH")
.do((action) => console.log('doing fetch', action.payload))
.mergeMap(({meta:{type}, payload:[url, options = {}]}) => {
let defaultHeaders = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
options.headers = {...defaultHeaders, ...options.headers};
let request = {
url,
method: 'GET',
responseType: 'json',
...options
};
//AjaxObservables are cancellable... that's why we use them instead of fetch. Promises can't be cancelled.
return AjaxObservable.create(request)
.takeUntil(action$.ofType(`${type}_CANCEL`))
.map(({response: payload}) => ({type, payload}))
.catch(({xhr:{response: payload}}) => (Observable.of({type, payload, error: true})));
}
);
registerEpic(fetchEpic);
したがって、このアクション (サーバー側) をトリガーするページに初めてヒットすると、すべてが正常に機能し、コンソールで「フェッチを実行しています」というメッセージが表示されます。
ただし、ページを更新すると、これらのコンソール メッセージのうち 2 つが生成され、結果のアクションはトリガーされません。
私は壮大なレジストリに「クリア」機能を追加しましたが、おそらく私は完全に初心者であり、完全には理解していません。これが私のミドルウェアです：
let epicRegistry = [];
let mw = null;
let epic$ = null;
export const registerEpic = (epic) => {
// don't add an epic that is already registered/running
if (epicRegistry.indexOf(epic) === -1) {
epicRegistry.push(epic);
if (epic$ !== null) { //this prevents the observable from being used before the store is created.
epic$.next(epic);
}
}
};
export const unregisterEpic =(epic) => {
const index = epicRegistry.indexOf(epic);
if(index >= 0) {
epicRegistry.splice(index, 1);
}
}
export const clear = () => {
epic$.complete();
epic$ = new BehaviorSubject(combineEpics(...epicRegistry));
}
export default () => {
if (mw === null) {
epic$ = new BehaviorSubject(combineEpics(...epicRegistry));
const rootEpic = (action$, store) =>
epic$.mergeMap(epic => epic(action$, store));
mw = createEpicMiddleware(rootEpic);
}
return mw;
};