Actions dan Reducers

Pelajari cara mengelola status dalam aplikasi NgRx menggunakan actions dan reducers.

Apa Itu Actions?

Actions menjelaskan peristiwa atau tindakan unik dalam aplikasi Anda, seperti memuat data atau interaksi pengguna.

Membuat Actions

Buat actions menggunakan createAction():

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

Payload Actions

Kirimkan data bersama actions menggunakan payload:

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

Reducers

Reducers menangani perubahan status berdasarkan actions. Reducers mengembalikan status baru tanpa mengubah status yang sudah ada secara langsung.

Membuat Reducers

Gunakan createReducer untuk menentukan cara status berubah:

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

Memperbarui Status

Reducers harus selalu mengembalikan objek status baru. Jangan pernah mengubah status yang sudah ada secara langsung.

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

Menggabungkan Reducers

Gabungkan beberapa reducers menjadi satu root reducer untuk mengelola status yang kompleks:

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

Ringkasan

Anda telah mempelajari cara membuat actions dan reducers untuk mengelola status secara efektif di Angular dengan NgRx!