Ila mchiti t-bb3 douk "Gurus" d l-Enterprise, ghadi y-goulo lik ay app f Angular khassha d-dar b Redux/NGRX. Kiy-bghiwk t-kteb Actions, Reducers, Effects, o Selectors ghir 3la qbl wahed l-button d toggle.

Men b3d 10 snin d l-khdma f l-front, ana k-nsmmi hadchi Sda3.

Dariba d l-Boilerplate

l-mochkil f l-libraries l-kbar d state management machi khaybin, walakin kiy-t-qlou l-khdma. Kat-wlli k-tdiyye3 40% d l-weqt f ktabat "glue code" f blast ma t-zid features jdad.

F l-ghalib d l-projets li dwwzt—swyya SaaS awla tools f ZINIR LAB—ma khasskch library ghalyia. Khassk Tkhwira.

Pattern dyal "Service-Store"

Hadi hiya l-Tkhwira l-mفضلa 3ndi. K-t-khdem ghir b Service basit o BehaviorSubject d RxJS.

L-Code (Simplified):

F blast dik r-rwina kamla, kat-dir service bhal hada:

@Injectable({ providedIn: 'root' })
export class UserStore {
  private readonly _user = new BehaviorSubject<User | null>(null);

  // Kat-khlli l-data t-tqra machi t-tbeddel m l-kharij
  readonly user$ = this._user.asObservable();

  // Hadi hiya l-tariqa l-whida bach t-updati l-user
  updateUser(user: User) {
    this._user.next(user);
  }
}

3lach hadi Tkhwira "nqyia"?

Unidirectional Data Flow: Kat-bqa 3ndk. Service houwa l-whid li kiy-beddel l-data.

  • Performance: Ma k-t-zid ta haja t-qila f l-bundle. Kat-khdem b RxJS li aslan kayn f Angular.

  • Debuggability: Service basit. T-qder d-dir breakpoint whda o t-3ref chkoun li beddel l-data f ay l-hda.

L-Khoulassa

Ma t-installich NGRX ghir hit chftiha f tutorial. Ila k-t-bni haja m-3qqa bzzaf d l-daraja l-ghachi m-khllt f l-data, dik sa3a mchach mochkil. Walakin ila bghiti t-lozer l-produit dyalk dghya o t-khlli l-code nqi, l-Service-Store houwa l-hll l-waqi'i.

Architecture hiya t-khtar l-tool li kiy-khrej l-khdma, machi li 3ndou l-stars bzzaf f GitHub.