Question

在我的角度应用程序中，我使用angular-redux进行应用程序状态管理。在我的主模块中，我定义了我的redux商店。像这样：

export class MainModule {
  constructor(private ngRedux: NgRedux<MainAppState>,
              private devTools: DevToolsExtension) {
    let enhancers = [];

    if (environment.production === false && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    this.ngRedux.configureStore(
      reducer,
      {} as MainAppState,
      [],
      enhancers);
  }
}

我创建了新的子模块，其中包含一些组件。这些组件应该访问应用程序状态。在其中一个组件中，我通过@select访问存储，但这不起作用。以下是我访问商店的方式：

export function getLanguage(state: LanguageState) { return state.userLanguage; }

我在ChildComponent类中的代码：

export class ChildComponent implements OnInit {

  @select(getLanguage) savedUserLanguage$: Observable<LanguageState>;

  // more code

}

如何从子模块访问应用程序状态存储？我应该在子模块中导入什么？为redux商店处理创建自己的模块会更好吗？也许我忘记了什么？

我使用Angular v4和@ angular-redux / store v6。

Answer 1

我建议您创建一个仅包含商店的单独模块，例如StoreModule。然后，您可以将StoreModule导入所有子模块，然后从那里访问您的商店。这是他们进入官方示例应用程序的方式：

StoreModule： https://github.com/angular-redux/example-app/blob/master/src/app/store/module.ts

子模块： https://github.com/angular-redux/example-app/blob/master/src/app/elephants/module.ts

子模块中的组件： https://github.com/angular-redux/example-app/blob/master/src/app/elephants/page.ts

Answer 2

我当时正在考虑将一些使用原型继承的丑陋JavaScript代码重构到Angular 7+项目中。我问自己几乎是同样的问题。受udemy Angular课程的启发，我尝试了一个使用ngrx存储和延迟加载模块的实验。

（请记住，ngrx与@ angular-redux相似，但这不是同一回事。有关详细信息，请参见https://ngrx.io/docs。）

Here it is。

我使用StoreModule.forRoot在主模块中创建商店，并在每个延迟加载的模块中使用StoreModule.forFeature创建对商店的引用。

（有关详细信息，请参见https://ngrx.io/api/store/StoreModule。）

当我用延迟加载的组件在商店上分发动作时，这些动作（和相应的reducer）似乎改变了主应用程序组件所订阅的值。

此外，当我在商店中使用主要应用程序组件调度操作时，这些操作（以及相应的reducer）似乎会更改延迟加载的组件所订阅的值。

此外，很难解释我在一个200-500个字符的简单块中所做的事情，因此我不得不使用github项目。

如何从子模块访问angular-redux存储？

2 个答案: