Eylemler ve Reducer'lar

NgRx uygulamalarında eylemleri ve reducer'ları kullanarak durumu yönetmeyi öğrenin.

Eylemler Nedir?

Eylemler, uygulamanızdaki veri yükleme veya kullanıcı etkileşimleri gibi benzersiz olayları ya da işlemleri açıklar.

Eylemler Oluşturma

createAction() kullanarak eylemler oluşturun:

export const login = createAction('[Login Page] Login');

Eylem Yükleri

Yükü kullanarak eylemlerle birlikte veri gönderin:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducer'lar

Reducer'lar, eylemlere göre durum geçişlerini yönetir. Mevcut durumu doğrudan değiştirmeden yeni durumlar döndürürler.

Reducer'lar Oluşturma

Durumun nasıl değişeceğini tanımlamak için createReducer kullanın:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Durumu Güncelleme

Reducer'lar her zaman yeni durum nesneleri döndürmelidir. Mevcut durumu doğrudan asla değiştirmeyin.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Reducer'ları Birleştirme

Karmaşık durumları yönetmek için birden çok reducer'ı tek bir kök reducer'da birleştirin:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

Özet

NgRx ile Angular'da durumu etkili bir şekilde yönetmek için eylemler ve reducer'lar oluşturmayı öğrendiniz!