我正在開發一個類似于保險 CRM 的企業前端。這是我的第一個大型 Angular 專案，這也是我直到現在才使用 NGRX 的原因。相反，我為每個頁面創建了一個 StateService，例如合同串列、合同詳細資訊……使用 stateobject 和 behaviorsubject 來使狀態反應。但是現在我必須在每個使用該服務的組件中訂閱、取消訂閱和實作一個 updateState 函式。
我想從長遠來看這將是一個反模式，可能是時候投資 NGRX 了。你能給我你的兩分錢嗎？你將如何處理狀態管理？請記住，我的時間有點短，因為第一次發布的截止日期是兩個月。
抱歉，我知道這是一個固執己見的問題，但我希望能獲得一些不同的狀態管理方式
uj5u.com熱心網友回復：
您沒有為您的解決方案包含任何特定代碼，但您可以使用簡單的選擇/修改函式來模仿 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 模式，但去掉了穩定庫的所有樣板和“安全性”。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/436735.html