标签: ngxs

我刚刚开始尝试,ngxs但从我的阅读到目前为止,我还没有100%清楚我应该回调我的API来坚持和读取数据(我看到的所有例子都没有这样做,或者使用一些模拟).

例如,我创建了一个维护项目列表的状态.当我想添加一个项目时,我将'AddItem`动作发送到商店,在那里我将新项添加到状态.这一切都运行正常 - 问题是插入将项目POST到服务器的调用的适当位置在哪里？

我应该在我的动作实现中调用API,即在更新商店的项目列表之前.

或者我应该在我的Angular组件中调用API(通过服务),然后在收到响应时调度"添加项目"操作？

我对这个领域很陌生,所以这些方法的任何指导或优点/缺点都会很棒.

我是Angular的新手,这个问题可能非常广泛.但我有兴趣了解有关国家管理使用情况的更多信息.最近我们的一个项目使用NGXS库实现了状态管理.但是,我试图了解它为应用带来的所有优势是什么？

实现非常深入,在高层次上,有一些操作将应用程序数据(由用户设置)和侦听器传递给那些处理请求并根据需要调度到下一步骤的操作.从一般的角度应用来看,这在应用程序使用或性能等方面有何不同.我正处于理解状态管理的初级阶段,所以我觉得我写的代码太多了,可能并不是真正需要的.示例 - 只是为了路由到另一个页面,我必须实现一个状态模式来保存对象并声明一个动作和一个监听器来实现该动作.

我正在阅读几份文件并获得有关如何实施国家管理的详细信息,但没有得到正确解决为什么要实施州管理的答案.

先感谢您!

如何单元测试一个动作是否被分派？

例如，在 LogoutService 中，我有这个简单的方法：

  logout(username: string) {
    store.dispatch([new ResetStateAction(), new LogoutAction(username)]);
  }

我需要编写一个单元测试来验证这两个操作是否已调度：

  it('should dispatch ResetState and Logout actions', function () {
    logoutService.logout();

    // how to check the dispactched actions and their parameters?
    // expect(...)
  });

我如何检查分派的动作？

是否可以在独立组件中使用 Ngxs？我尝试NgxsModule通过以下方式导入：

@Component({
  ...
  imports: [
    ...
    NgxsModule.forFeature([MyState]),
...

和

@Component({
  ...
  imports: [
    ...
    NgxsModule.forRoot([MyState]),
...

但两者都给我以下错误消息：（Type 'ModuleWithProviders<NgxsFeatureModule>' is not assignable to type 'any[] | Type<any>'或NgxsRootModule在这种forRoot情况下）。还提供了更深入的错误消息：'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

这是否受支持，但我的语法错误？或者这是不支持的？如果不支持，拦截器是什么？

我学习ngxs但是当我应该用我无法理解patchState和setState？有什么不同？

const state = ctx.getState();
let data =  this.service.list();
ctx.setState({
    ...state,
    feedAnimals: data
});

与

let data =  this.service.list();
ctx.patchState({
    feedAnimals: data
});

我只想编写一个操作来对状态执行相同的 CRUD 操作，只是在状态的不同部分上执行，同时保持类型安全。

例如，我想使用以下操作将集合操作应用于具有泛型类型的任何切片T：

export class Set_Entity<T> {
  static readonly type = '[Entity] Set';
  constructor(public payload: <T>) {}
}

这是有问题的，因为类型总是相同的。是否可以以某种方式装饰此类，以便type在将其用作 时可以传入唯一的属性@Action？

就像是：

/* action* /
class Set_Entity<T> {
  constructor(public entity: string, public payload: <T>) {}
}


/* state */
@Action(Set_Entity('[Groups] Set Group'/* <-- Changes the `type` property */))
set_group(
  context: StateContext<Model>, 
  action: SetEntity<{entity: string, payload: Group}>,
) {
  const entity = action.entity;
  const data = action.payload;
  context.patchState({ [entity]: data });
}


/* facade or …

我在 Angular 9 应用程序中使用 NGXS 进行状态管理。在状态类之一中，任何依赖项注入都会导致错误“错误：无法解析 TranslationEditorState 的所有参数：(?)”。我尝试过注入服务甚至 HttpClient，但问题仍然存在。事实上，对于任何状态类，我都会遇到相同的错误。难道和app.module中Module注入的顺序有关系吗？

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_INITIALIZER, NgModule } from '@angular/core';

import { NgxsModule } from '@ngxs/store';
import { AuthModule } from './auth/auth.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { AuthInterceptor } from './auth/auth.interceptor';
import { AppRoutingModule } from './app-routing.module';
import { configFactory } from './shared/utils/config.factory';
import { NgxsFormPluginModule } from '@ngxs/form-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { HTTP_INTERCEPTORS …

我已将我的项目 Angular 上传到 Stackblitz，该项目在 Visual Studio Code 上完美运行。

但是，当我在 Stackblitz 上打开该项目时，出现一条错误消息：

Error in src/app/store/session/session.actions.ts (1:32)
Cannot find module 'src/app/services/session.response' or its corresponding type declarations.

我打开了session.action.ts文件：

import { SessionReponse } from "src/app/services/session.response";

export class SessionAction {
    static readonly type = '[login] connexion';
    constructor(public session: SessionReponse ) { }
}

我不明白问题出在哪里，因为我在 Visual Studio Code 上有相同的代码。

我在 Stackblitz 上的项目在这里。

非常感谢您的帮助。

我有一个带有组件的模块，该组件可调度 FETCH 操作，该组件从 API 获取数据，然后调度 RECEIVED 操作。它工作得很好。

然后我将模型、动作和状态复制到另一个模块和组件（具有不同的获取和接收），但它不起作用。记录器将操作显示为已调度，但未执行代码。

文件.action.ts

export class FetchFolders {
  static readonly type = '[Documents] Fetch folders';

  constructor(public payload: string) { }
}

文件.state.ts

  @Action(FetchFolders)
  FetchFolders(state: StateContext<DocumentStateModel>, { payload }: FetchFolders) {
    console.log('inside');
    return this.http.get(`assets/fake-data/${payload}/documents.json`)
      .pipe(
        tap(result => this.store.dispatch(new ReceiveFolders(<DocumentFolder[]>result)))
      );
  }

我已将代码减少到最低限度，以检查一切是否正常工作。还检查了导入（有时我从错误的库中导入），但仍然没有运气。

知道发生了什么吗？

我创建了一个新的 Angular 应用程序 (v15.2.0)，并添加了 @ngxs/store (v3.7.6)\n可以在此处查看详细的 package.lock

{\n  ...\n  "dependencies": {\n    "@angular/animations": "^15.2.0",\n    "@angular/common": "^15.2.0",\n    "@angular/compiler": "^15.2.0",\n    "@angular/core": "^15.2.0",\n    "@angular/forms": "^15.2.0",\n    "@angular/platform-browser": "^15.2.0",\n    "@angular/platform-browser-dynamic": "^15.2.0",\n    "@angular/router": "^15.2.0",\n    "@ng-bootstrap/ng-bootstrap": "^14.0.1",\n    "@ngxs/store": "^3.7.6", <-- added by me\n    "ngx-cookie-service": "^15.0.0", <-- added by me\n    "font-awesome": "^4.7.0", <-- added by me\n    "bootstrap": "^5.2.3", <-- added by me\n    "rxjs": "~7.8.0",\n    "tslib": "^2.3.0",\n    "zone.js": "~0.12.0"\n  },\n  "devDependencies": { <-- all ar the default ones\n    "@angular-devkit/build-angular": "^15.2.1",\n    "@angular/cli": "~15.2.1",\n    "@angular/compiler-cli": "^15.2.0",\n    "@types/jasmine": "~4.3.0",\n    "jasmine-core": "~4.5.0",\n    "karma": …