Nawa NgRx na sarrafa jihar ta aiki?

Question

Accepted Answer

**NgRx** shine cibiya sarrafa jihar da ta samu asalin daga Redux don Angular. Ta tara jihar aikacin a ciki ɗaya da ba zai canza ba **store**, tare da iko mai karfi, da iya amfani, da karkar sanarwa jiya a kan RxJS. ## Abubuwan mahimman gida da cikin jiya ```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) ``` ## Ayyuka — bayyana abin da ya faru ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — cikakken aikin da ke kallon jiya na gida ```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 **mai tsarki** ne — idan an ba ka jihar jiya da aiki, suna mayar da sabuwar jihar abin (ba wai ta canza ba), ba a taɓa canja jiya kaiɗa. ## Tasiri — kula da abubuwan banre (HTTP, jn.k.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Tasiri suna sauraron ayyuka, suna aiki da asuncin (kamar HTTP) da aika ayyukan sakamako — kiyaye abubuwan banre daga abubuwan da aka haɗa da reducers. ## Zaɓi + amfani da abubuwa ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Jiya ne NgRx tunani? ```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 ``` (Lura: NgRx kuma yana ba da **SignalStore** da **ComponentStore** masu karke don ƙarami boilerplate.) ## Me yasa ya hadu NgRx kawo da mai tsarki, tari, da gida-karkar sanarwa jihar sarrafa daga Redux zuwa Angular — da mahimmanci ga manyan aikace-aikace inda abubuwan da dama ke raba jihar mai sarari, kuma inda tsarki mai karfi da daidaitawa suna da muhimmanci. Ammā yana da wani babbar boilerplate, saboda haka mahimman yanke shawara shine *jiya* a yi amfani (babbar/sarari mai sarari) a gida da yadda sauƙi (sabis tare da alamar ko `BehaviorSubject`) don ƙaramin aikace-aikace. Ganewa gamawa→reducer→store→selector jiya da tasiri don abubuwan banre shine tsattsauran don aiki a cikin NgRx abubuwan koda.