angular - 静态解析符号时遇到错误

Question

我有一个使用 ngrx 的 Angular4 应用程序。我创建了一个撤消高阶 reducer ，如记录 on the redux website .

不幸的是，当我在我的 root.reducers.ts 文件中应用此函数并收到此错误时，我遇到了提前 (AoT) 编译问题

错误中的错误遇到静态解析符号值。调用函数“可撤销”，不支持函数调用。考虑用导出函数的引用替换函数或 lambda，解析符号 rootReducer

代码在 AoT 关闭或文件被修改后完美运行，在这种情况下使用即时编译。

我尝试使用 ngrx-undo以前，但它似乎没有用，这就是我推出自己的解决方案的原因。

我已经尝试查看其他 stackoverflow 帖子并搜索谷歌，但大多数其他问题似乎与第 3 方库或自定义组件有关，这与本例无关。

我知道我可以通过删除高阶 reducer 并将 cartReducer 直接转换为可撤消来解决此问题，但这是不可取的，因为如果我们使任何其他 reducer 可撤消，我们将有很多代码重复。

我该如何解决这个错误？最好不要删除 AoT 编译，因为一旦我们投入生产就需要这样做。

代码:

See Gist for complete code

root.reducers.ts

import { sessionReducer } from './reducers/session.reducers';
import { cartReducer } from './reducers/cart.reducer';
import { undoable } from './reducers/undo.reducer';
import { paymentReducer } from './reducers/payment.reducer';
import { accountReducer } from './reducers/account.reducer';
import { productReducer } from './reducers/product.reducer';
import { errorReducer } from './reducers/error.reducer';

export const rootReducer = {
  session: sessionReducer,
  cart: undoable(cartReducer),
  payment: paymentReducer,
  account: accountReducer,
  product: productReducer,
  error: errorReducer
};

Answer 1

最后，我将大部分撤消 reducer 代码抽象成单独的函数，并返回一个构建特定 reducer 的函数。这似乎解决了问题

在 cart.reducer.ts 中

const initialState: UndoState<CartState> = buildInitialState(initialCartState);
export function undoableCartReducer(state = initialState, action): UndoState<CartState> {
    return handleAction(state, action, cartReducer);
}

在 undo.reducer.ts 中

export function buildInitialState<S>(state: S): UndoState<S> {
    return {
        past: [],
        present: state,
        future: []
    };
}

export function delegate<S>(state: UndoState<S>, action, reducer: ActionReducer<S>): UndoState<S> {
    const {past, present, future} = state;
    const newPresent = reducer(present, action);
    if (present === newPresent) {
       return state;
    }
    return {
        past: [...past, present],
        present: newPresent,
        future: []
    };
}

export function handleAction<S>(state: UndoState<S>, action, reducer: ActionReducer<S>): UndoState<S> {
    switch (action.type) {
        case 'UNDO':
            return undo(state);
        case 'REDO':
            return redo(state);
        default:
            return delegate(state, action, reducer);
    }
}

新的 root.reducers.ts

export const rootReducer = {
  session: sessionReducer,
  cart: undoableCartReducer,
  payment: paymentReducer,
  account: accountReducer,
  product: productReducer,
  error: errorReducer
};