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

Question

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

我想从长远来看这将是一种反模式，也许是时候投资 NGRX 了。您能否给我您的两分钱以及您将如何进行状态管理？请记住，我的时间有点短，因为第一次发布的截止日期是两个月。

抱歉，我知道这是一个固执己见的问题，但我希望得到一些不同的方式来进行状态管理

Answer 1

您没有为您的解决方案包含任何特定代码，但您可以使用简单的选择/修改功能来模仿 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 } }));

您不必重新实现任何逻辑，因为状态修改只是一个回调函数，它返回状态模型的部分对象，该对象会覆盖当前状态对象。

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