Question

我正在从Angular 2升级到Angular 4 + Universal。在以前的版本中，我在reducer中使用存储状态来设置初始状态。 getInitialState函数将设置状态，然后检查缓存中是否有任何先前的值并更新状态。然后在导出的默认函数user中返回状态。

function getInitialState() {
let initialState;
const emptyState = {
    categories: null,
    seeAllUsers: null,
    groups: userGroupExists(),
    formData: null,
    bonusSeeAllUsers: null,
    fetching: false,
    searchResults: null
};
if (isBrowser) { // here is my problem
    if (window['UNIVERSAL_CACHE'] !== undefined) {
        const cache = JSON.parse(window['UNIVERSAL_CACHE'].CacheService);
        if (cache) {
            initialState = {
                groups: cache.groups ? updateGroups(cache.groups) : null,
                seeAllUsers: cache.seeAllUsers ? updateSeeAllUsers(cache.seeAllUsers) : null,
                groups: userGroupExists(),
                formData: null,
                bonusSeeAllUsers: null,
                fetching: false,
                searchResults: null
            };
        } else {
          initialState = emptyState;
        }
    } else {
        initialState = emptyState;
    }
} else {
    initialState = emptyState;
}
return initialState;
}

export default function user(state: any = initialState, action: Action{
      switch (action.type) {
        case TYPES.RECEIVE_USERS_SEE_ALL_BEGIN:
          let nextSeeAllBeginState;
          if (action.payload.data === 0) {
            return assign({}, state, {
            seeAllUsers: {},
            bonusSeeAllUsers: {},
            fetching: true
           });
          }
        }    
    }

自Angular Universal最近更新以来，需要将PLATFORM_ID注入构造函数以检查代码是否在浏览器或服务器上运行，如下所示：

constructor(@Inject(PLATFORM_ID)platformId: string){
    isPlatformBrowser(platformId){
        // access window
    };
}

由于Reducer不能使用任何Angular装饰器，如何利用缓存中的值来更新我的状态？

Answer 1

你试过试试/抓住窗户吗？例如：

try {
    const cache = window.UNIVERSAL_CACHE;
} catch (e) {}

这是我在介绍platformId之前管理特定浏览器的代码与Universal兼容的方式。

如何在Angular Universal应用程序中设置初始状态？

1 个答案: