我应该重构我的项目以使用 NGRX 吗？

Question

我正在开发一个类似于保险 CRM 的企业前端。这是我的第一个大型 Angular 项目，这也是我直到现在才使用 NGRX 的原因。相反，我为合同列表、合同详细信息等每个页面创建了一个 StateService，使用状态对象和行为主体来使状态具有反应性。但是现在我必须在每个使用此服务的组件中订阅、取消订阅和实现一个 updateState 函数。

我想从长远来看这将是一种反模式，可能是投资 NGRX 的时候了。你能告诉我你的两分钱吗？你将如何处理状态管理？请记住，我的时间有点短，因为第一个版本的截止日期是两个月。

抱歉，我知道这是一个自以为是的问题，但我希望获得一些不同的状态管理方法

Answer 1

您没有为您的解决方案包含任何特定代码，但您可以使用简单的 select / 修改函数来模仿 redux 模式。

@Injectable({ providedIn: 'root' })
export class StateService {
  state: StateModel;
  stateSubject$: BehaviorSubject<any>;

  constructor() {
    this.setInitialState();
    this.stateSubject$ = new BehaviorSubject<any>(this.state);
  }

  select(propPath: keyof StateModel | '' = ''): Observable<any> {
    let observable: Observable<any> = this.stateSubject$.asObservable();
    if (propPath.length > 0) {
      propPath.split('.').forEach((prop) => {
        observable = observable.pipe(map((state) => state[prop]));
      });
    }
    return observable;
  }

  modify(modFn: (state: StateModel) => Partial<StateModel>) {
    this.state = { ...this.state, ...modFn(this.state) };
    this.stateSubject$.next(this.state);
  }

  setInitialState() {
    this.state = {
      someProp: { a: 10, b: 20 },
      somethingElse: 'Hello world',
    };
  }
}

用法

    // some.component
    // select a value from your state
    this.somethingElse = state.select('somethingElse');
    this.a = state.select('someProp.a');
    // modify the state
    state.modify((state) => ({ somethingElse: 'Foobar' }));
    state.modify((state) => ({ someProp: { a: 310, b: state.someProp.b } }));

您不必 re-implement 任何逻辑，因为状态修改只是一个回调函数，returns 覆盖当前状态对象的状态模型的部分对象。

这种方法类似于 Redux 模式，但消除了稳定库的所有样板和“安全性”。

我应该重构我的项目以使用 NGRX 吗？

Should I refactor my project to use NGRX?

ngrx

angular