Question

我注册了#Epic＆＃39;此处描述的实用程序：Is it an efficient practice to add new epics lazily inside react-router onEnter hooks?

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

所以我第一次点击一个触发此操作的页面（服务器端）一切正常，我得到了提取＆＃39;一旦进入控制台。

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

我添加了一个＆＃39; clear＆＃39;功能到我史诗般的注册表，但也许我总是noob酱，只是没有完全理解它。这是我的中间件：

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？如果你不替换中间件中当前正在运行的史诗，真的很难确保它没有采取行动 - 听起来就像这里发生的那样。

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

这就是为什么我们还没有记录如何在redux-observable中进行SSR，因为虽然我们已经创建了“做到”的代码，但我们对这些选择并不自信。

你决定如何处理它，你很可能最终要求epicMiddleware.replaceEpic(nextRootEpic)让中间件停止订阅以前的根史诗。

如果您不希望让epics在页面呈现服务器端期间完全执行任何，那么您将同步呈现页面，然后立即再次使用相同的根史诗替换根史诗。也就是说，你几乎肯定会再次传递完全相同的根史诗，这将有效地“重新启动”你的史诗树 - 但是，如果你写了一部行为不端的史诗，那就再也不能保证。

如果您想发布实际的SSR代码，我很乐意帮助您进一步详细说明，例如：如果您使用React和react-router，它将是您的所有match({ routes, location: req.url } ...etc)内容。

值得注意的是，很多人都有SSR should not do any side effects的意见，并将其留给客户。因此，在具有类似React之类的redux-observable情况下，没有AJAX调用，这意味着在componentDidMount（不运行服务器端）之前不会调度导致副作用的操作。这主要是因为在许多方面这会破坏SSR可能带来的性能优势，因为您不是尽快发送初始HTML，让JS出现。但是，通常没有提到的是，如果你不提取任何类型的动态数据，你的应用程序显然不会有太多的SEO好处。这是您必须决定的权衡，或者可能使用两者的混合。

第一次发送后的redux-observable多重操作

1 个答案: