Utenzi wa jimbo na NgRx unafanya kazi vipi?

Question

Accepted Answer

**NgRx** ni maktaba ya kusimamia hali inayosimuliwa na Redux kwa Angular. Inakusanya hali ya programu katika **store** moja isiyobadilika, yenye mtiririko wa data wenye kazi, unaopendekezwa, unaoelekeza mwelekeo mmoja umejengwa kwenye RxJS. ## Sehemu za msingi na mtiririko ```text Component dispatches an ACTION → REDUCER produces new state (pure function) → STORE updates → SELECTORS read state → Component re-renders (EFFECTS handle side effects like HTTP, dispatching new actions) ``` ## Vitendo — vieleza kile kinachotokea ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — kazi safi inayohesabu hali inayofuata ```ts import { createReducer, on } from "@ngrx/store"; export const usersReducer = createReducer( initialState, on(loadUsers, state => ({ ...state, loading: true })), on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })), ); ``` Reducers ni **safi** — ikipewa hali ya sasa na vitendo, winarudisha kitu cha hali kipya kabisa (bila mabadiliko), kamwe hayabadilishi kile kizee. ## Athari — kukamatia athari za upande (HTTP, nk) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Athari husikia vitendo, kutekeleza kazi isiyo na linganifu (kama HTTP), na kutuma vitendo vya matokeo — kuweka athari za upande nje ya sehemu na reducers. ## Wasifu + matumizi ya sehemu ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## NgRx ni nini iliyowahi? ```text ✓ Large apps with lots of shared state across many components ✓ Complex state interactions, need for time-travel debugging / strict predictability ✗ Small/medium apps → it's heavy boilerplate; a service + signals/BehaviorSubject is simpler ``` (Kumbuka: NgRx pia inatoa **SignalStore** nyepesi na **ComponentStore** kwa boilerplate ndogo.) ## Kwa nini inamaanisha NgRx inaleta usimamizi wa hali wa Redux wenye makini, wenye kituo, wenye mwelekeo mmoja kwa Angular — muhimu kwa programu kubwa ambapo sehemu nyingi zinashiriki hali tata, na mahali kufuatilia kwa kina na debugging kuwa na maana. Lakini inaleta boilerplate kubwa, kwa hiyo hukumu kuu ni *lini* kuutumia (jamii kubwa/tata iliyoshirikiwa) kwa kuhitasishwa na njia rahisi (huduma zilizo na mita au `BehaviorSubject`) kwa programu ndogo. Kuelewa mtiririko vitendo→reducer→store→selektor na athari za upande ni muhimu kwa kufanya kazi katika misingi ya NgRx.