redux-observable 第一次派送后的多项操作

Question

我是此处描述的 'registerEpic' 实用程序：

我们的代码需要是同构的，但在服务器端，第一次触发一个动作，一切都很好。然而，第二次触发动作时，史诗似乎获得了该动作的 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);

所以我第一次点击触发此操作的页面（服务器端）一切正常，我在控制台中获得了一次 'doing fetch'。

但是，刷新页面会产生 2 条控制台消息，并且不会触发结果操作。

我在我的史诗注册表中添加了一个 'clear' 功能，但也许我完全是菜鸟酱，只是没有完全理解它。这是我的中间件：

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;
};

Answer 1

我在任何地方都没有看到 epicMiddleware.replaceEpic？如果您不替换中间件中当前的运行ning 史诗，就很难真正保证它没有采取行动——这听起来就像这里发生的事情一样。

使用 redux-observable（或任何异步中间件，包括 redux-saga）进行服务器端渲染很困难，因为您必须创建一些约定。例如当你的应用程序启动时，如果一个史诗开始了一些副作用，你什么时候说 "that's enough" 并过早地切断它？你让他们做任何异步的事情吗？你如何正确地保证史诗真正结束它的所有副作用？可能中间件停止订阅史诗，但它没有正确链接其订阅者，因此无论如何都会继续产生一些副作用。

这就是我们尚未在 redux-observable 中记录如何执行 SSR 的原因，因为虽然我们已经创建了 "does it" 的代码，但我们对选择没有信心。

无论您决定如何处理它，您很可能希望最终调用 epicMiddleware.replaceEpic(nextRootEpic) 让中间件停止订阅之前的根史诗。

如果您不想让 epics 在页面呈现服务器端期间完全异步地做 任何事情 ，您将同步呈现页面，然后在替换后立即呈现根史诗再次具有相同的根史诗。也就是说，您几乎肯定会再次传递完全相同的根史诗，这将有效地 "restart" 您的 epics 树——但同样，如果您编写了行为不当的史诗，则无法保证。

如果您想 post 您的实际 SSR 代码，例如如果你使用 React 和 react-router，这将是你所有的 match({ routes, location: req.url } ...etc) 东西。

值得注意的是，很多人都有SSR should not do any side effects的意见，留给客户吧。所以没有 AJAX 调用，在 redux-observable 情况下使用像 React 这样的东西，这意味着直到 componentDidMount（这不是运行服务器端才派发导致副作用的动作).这主要是因为在很多方面这会破坏 SSR 可能带来的性能优势，因为您没有尽快发送初始 HTML，让 JS 出现。然而，通常没有提到的是，如果您不提取任何类型的动态数据，您的应用程序显然不会有太多 SEO 优势。这是您必须做出的权衡，或者可能两者兼而有之。

redux-observable 第一次派送后的多项操作

redux-observable multiple actions after 1st dispatch

fetch

rxjs

behaviorsubject

redux

redux-observable