angular NGRX 2025 action reducer effects

 

• Actions describe events.

• Reducers update state synchronously and purely.

• Effects handle asynchronous or other side-effect work, bridging Actions → external APIs → new Actions.

This separation of concerns makes your NgRx store highly predictable, testable, and traceable.

Component calls

store.dispatch(loadTodos());

Actions stream emits a loadTodos action.

Reducer sees loadTodos → updates state to { loading: true }.

Effect sees loadTodos, performs HTTP call, then dispatches either

• loadTodosSuccess({ todos })

• or loadTodosFailure({ error })

Reducer handles the success/failure action → stores data or error, sets loading: false.

Component selects slices of state via store.select(...) to render UI.

---------------------

auth effects listening on auth action

auth effect emit component based action

component based auction reigster auction

component based reducer listen on auction(synchorous) -> calls entity dapter to remove data

------------------------------