Suggest an editImprove this articleRefine the answer for “How does NGXS differ from NgRx?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**NGXS and NgRx** both manage state in Angular, but NGXS does it through classes and decorators (`@State()`, `@Action()`), while NgRx uses pure functions (`reducers`) and RxJS. **Key point:** NGXS is simpler and faster to start with, NgRx is stricter and better suited to large projects with an experienced team.Shown above the full answer for quick recall.Answer (EN)ImageHere'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: | | **NgRx** | **NGXS** | |---|---|---| | Approach | Functional, Redux | Class-based, Angular-style | | Code | Lots of boilerplate, strict | Short, simple | | State update | Through reducer functions | Through `ctx.setState()` in a method | | Side effects | Through `createEffect` + RxJS | Inside `@Action` methods, `async/await` works | | Best for | Medium and large projects, experienced teams | Fast start, easier for beginners | Both libraries do the same thing, they **manage state**, just in different ways.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.