如何在 nx 工作空间中使用 ngrx-store-freeze

Question

我正在为我的应用程序使用 nx 工作区。我已将所有 reducer 放在 libs 部分，因为它们在多个应用程序之间共享。但是在创建 meta-reducer 时我想使用 ngrx-store-freeze 进行开发。

推荐的方式是使用这一行： export const metaReducers: MetaReducer<State>[] = !environment.production ? [storeFreeze] : [];

但是当我不知道要导入哪个环境时，我怎么知道应用程序是否是生产环境，因为我不知道哪个应用程序将运行在 nx 工作区中，并且 ngrx 减速器是纯函数所以我不能注入环境？

Answer 1

创建一个函数来为您创建元缩减器。此函数接受一个参数，指示它是否用于生产模式。

export function createMetaReducers(freeze = false): MetaReducer<State>[] {
    return freeze
        ? [storeFreeze] 
        : [];
}

像这样你的图书馆不关心你是否处于生产模式，你的图书馆的用户可以决定。

更新您的评论

I have created a function, but I cannot use this function in my app.module.ts, in the imports section, before I did this: 'StoreModule.forRoot(reducers, { metaReducers }),' Now I have tried using the new function StoreModule.forRoot(reducers, { createMetaReducers(true) }) but get the error: "Argument of type '{ createMetaReducers(: any): any; }' is not assignable to parameter of type 'StoreConfig'." How would you resolve this problem?

您已经解决了您的问题，但我想解释一下发生了什么。

Typescript 和现代 ECMA 脚本有一些语法糖来缩短某些东西。

假设您有一个要为其指定名称的对象：

const obj: any = { name: 'Tom' }

现在我们可能不会对名称进行硬编码，而是将其保存在名为 name 的变量中。然后代码如下所示：

const name: string = 'Tom';
const obj: any = { name: name };

可以看到变量的名称与对象中的字段相同。如果是这种情况，您可以简单地删除 : name 部分并这样写：

const name: string = 'Tom';
const obj: any = { name };

此代码片段与上述代码片段的作用相同。

这叫做 Object Literal Property Value Shorthand（如果我说错了，请有人纠正我）你可以在这里找到更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

现在回到你的代码。 StoreModule.forRoot 需要两个参数。第二个参数是一个配置对象，你可以在其中传入 meta reducers

StoreModule.forRoot(reducers, { metaReducers: [] })

因此，要解决此问题，您有两种可能性。

你所做的工作正常：

const metaReducers = createMetaReducers();
StoreModule.forRoot(reducers, { metaReducers })

解决此问题的另一种方法是采用以下方法：

StoreModule.forRoot(reducers, { metaReducers: createMetaReducers() })

如何在 nx 工作空间中使用 ngrx-store-freeze

How to use ngrx-store-freeze with nx workspace

ngrx

angular

ngrx-store

nrwl