Я - утилита registerEpic, описанная здесь: Является ли эффективной практикой ленивое добавление новых эпиков внутри перехватчиков response-router onEnter?
Наш код должен быть изоморфным, но на стороне сервера действие запускается в первый раз, и все в порядке. Однако во второй раз, когда действие запускается, кажется, что эпос получает 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;
};
