Introduction

Hello everyone, my name is Maxim Ivanov. I am a member of the NGXS team and the organizer NGXS-Labs. I’ve been with the team for 2 years and I’ve learned a lot. All this time I’ve been searching for new approaches for state management.

In Angular applications, basically everyone uses NGRX. However, I’d like to share my experience back when we had a medium-large enterprise application. We started with NGRX, but it quickly became clear that:


Introduction

Hello everyone, my name is Maxim Ivanov. I am a member of the NGXS team and organizer NGXS-Labs. I have been with the team for 2 years and over the years I have learned a lot. Last time we talked about what does NGXS offer for us. Today, we will go back in time and find out how it all began.

History


The Angular team has worked hard to ensure Ivy is as backwards-compatible with the previous rendering engine (“View Engine”) as possible. Unfortunately, some changes have to be made so that NGXS and Ivy can function together seamlessly.


Angular provides the ability to have a different environment file loaded for development as compared to production or other build targets. We can use this to improve our application bundling when it comes to development only packages. In NGXS the packages that are mainly useful only for development mode are the @ngxs/devtools-plugin and @ngxs/logger-plugin. Typically you would only want to use these packages during development and not in production.

Let’s look at the code below:


Do you know that?

Selector Options

The behavior of the memoised selectors can be configured at a global level using the selectorOptions property in the options passed to the NgxsModule.forRoot call (see Options). These options can also be provided through the @SelectorOptions decorator at a Class or Method level in order to configure the behavior of selectors within that scope. The following options are available:

suppressErrors

  • true will cause any error within a selector to result in the selector returning undefined.
  • false results in these errors propagating through the stack that triggered the evaluation of the selector that caused the error.

NOTE: The default for this setting…


Introduction

Last time we talked about how to work with immutable data and how to store data in NGXS (part I, part II, part III). Today we will talk about what does NGXS offer and when need to choose native RxJS. In the following parts, we will discuss many interesting topics related to NGXS. But before diving in, let’s look at the history of state management and where NGXS came from.

Part I. What does NGXS offer?

  • 🐼 I. What is Redux?
  • 💥 II. Angular + RxJS
  • 🦅 III. Angular + NGXS

Next time we talk about:

Part II. Is Flux the foundation of our architecture? Part…


Introduction

Hello everyone, my name is Maxim Ivanov. I am a member of the NGXS team. Last time we talked about how to create immutable objects to avoid mutation. Today we will get acquainted with the built-in tools in NGXS to prevent mutations.

Immutable, structurally shared data structures are a great paradigm for storing state. Especially when combined with an event-sourcing architecture. However, there is a cost to pay. Creating a new state from the previous one is a boring task in such languages as JavaScript, that don’t support immutability. And still; most of them don’t solve the root problem: lack…


Introduction

Hello everyone, my name is Maxim Ivanov. I am a member of the NGXS team. In the previous article we looked at how we can prevent object mutations. Now we will look at how you can avoid mutations by creating immutable objects and making ‘changes’ to them in an immutable way.

What is immutability?

Immutable objects are objects whose state can not be changed once the object is created. An immutable value is one that, once created, can never be changed. In JavaScript primitive values such as numbers, strings and booleans are always immutable. However, data structures like objects and arrays are not…

Ivanov Maxim

Code 🤖, Bike 🚵 and Music 🎶 Teams: @splincodewd ★ @Angular-RU ★ @ngxs ★ github.com/splincode

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store