Actions와 Reducers

Actions와 Reducers를 사용하여 NgRx 애플리케이션의 상태를 관리하는 방법을 학습합니다.

Actions란 무엇인가요?

Actions는 데이터 로드나 사용자 상호 작용처럼 애플리케이션에서 발생하는 고유한 이벤트 또는 동작을 설명합니다.

Actions 만들기

createAction()을 사용하여 Actions를 만드세요:

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

Action 페이로드

페이로드를 사용하여 Actions와 함께 데이터를 전달하세요:

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

Reducers

Reducers는 Actions를 기반으로 상태 전환을 처리합니다. 기존 상태를 직접 변경하지 않고 새로운 상태를 반환합니다.

Reducers 만들기

createReducer를 사용하여 상태 변경 방식을 정의하세요:

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

상태 업데이트하기

Reducers는 항상 새로운 상태 객체를 반환해야 합니다. 기존 상태를 직접 변경하지 마세요.

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

Reducers 결합하기

복잡한 상태를 관리할 수 있도록 여러 Reducers를 하나의 루트 Reducer로 결합하세요:

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

요약

NgRx를 사용하여 Angular에서 상태를 효과적으로 관리하도록 Actions와 Reducers를 만드는 방법을 학습하셨습니다!