How does NGXS differ from NgRx?

Here's a simple comparison: NGXS vs NgRx - two libraries for managing state in Angular, but with different approaches.

#1. Syntax

• NgRx - a functional style: createAction(), createReducer(), createEffect().
• NGXS - an object-oriented style: classes, @State() and @Action() decorators.

NgRx is like Redux with RxJS. NGXS is like Angular classes with logic inside.

#2. Working with state

• NgRx: The state changes only through pure functions (reducers), everything is strictly immutable.
• NGXS: Changes happen inside methods with access to ctx.setState(). You can write simpler, clearer code, especially as a beginner.

#3. Actions

In NgRx, actions are plain objects, created through createAction(). In NGXS, they are classes with static type, and are invoked as new Action().

#4. Effects / side effects

NgRx: createEffect() + RxJS. The code is reactive and more strictly separated. NGXS: you can handle async logic right inside an @Action() method (for example, async/await within the method).

#5. Amount of code

NgRx requires more files and boilerplate (actions, reducers, effects, selectors). NGXS means less code, with more logic in one place (the state class).

#6. Learning curve

NgRx is harder, it requires understanding RxJS. NGXS is easier to start with, closer to regular Angular code.

#Conclusion:

Both libraries do the same thing, they manage state, just in different ways.