ngrx - 如何使用ngrx将项目添加到初始状态的实体

Question

我正在使用实体，而不是在开始时使用空实体，我想在初始状态下添加一个默认项。我尝试了如下方法：

const id = uuidv4()

const zeroState = adapter.getInitialState({
  activeTabId: id,
});

const homeTab = {
  pageID: id,
  pageTitle: 'Home',
} as PageInfo;

export const initialState = adapter.addOne(homeTab, zeroState);

它在开发环境中运行良好，并且ng build --prod=true构建良好。但是当我部署应用程序时，它不会运行/加载任何东西，而是抛出Uncaught Error: Cannot enable prod mode after platform setup..

有人可以告诉我如何将项目添加到初始实体状态吗？

Answer 1

不幸的是，adapter.addOne 不能这么早工作。但也有一些选择。

您可以手动注入实体，实体的存储结构非常简单：

const id: any = uuidv4(); // any because of type cast.

const zeroState = adapter.getInitialState({
    activeTabId: id,
});

export const initialState = {
    ...zeroState,
    ids: [
        ...zeroState.ids,
        id,
    ],
    entities: {
        ...zeroState.entities,
        [id]: {
            pageID: id,
            pageTitle: 'Home',
        },
    },
};

或者您可以为此使用效果，它在 prod 模式下工作。

@Injectable()
export class EntitiesEffects {
    @Effect()
    public readonly data$ = this.actions$.pipe(
        ofType(ROOT_EFFECTS_INIT),
        switchMapTo(
            merge(
                of(
                    new UpsertAddress({
                        address: {
                            id: 'address1',
                            name: 'Address 1',
                        },
                    }),
                    // more entities
                    new UpsertUser({
                        user: {
                            id: 'user5',
                            name: 'User 5',
                            companyId: 'company3',
                        },
                    }),
                    new UpsertUser({
                        user: {
                            id: 'user6',
                            name: 'User 6',
                            companyId: 'company3',
                            managerId: 'user5',
                        },
                    }),
                ),
            ),
        ),
    );

    constructor(protected readonly actions$: Actions) {}
}

然后在 AppModule

@NgModule({
    imports: [
        EffectsModule.forRoot([EntitiesEffects]),
    ],
})
export class AppModule {}

Answer 2

使用setAll适配器的方法：

const initialState = adapter.setAll([homeTab], zeroState);

（其中homeTab是一个实体，zeroState是 的返回值adapter.getInitialState）