Introduction To NgRx4

What is NgRx?

NgRx is a suite of libraries that empowers us The Developers to be more effective at building the large projects.
The update has official support for lazy loading. Previously, it was possible to do lazy loading with NgRx, but now it’s much easier for everyone involved.

Some of the highlights:

->Official support for lazy loading
->Simplified testing
->Redesigned router integration
 
How to install:

Install @ngrx/core and @ngrx/store from npm:

npm install @ngrx/core @ngrx/[email protected] --save

The Optional Packages:

@ngrx/store-devtools instruments your store letting us use a powerful time-travelling debugger.
@ngrx/router-store keeps the state of @angular/router in our store
@ngrx/effects isolates side effects from our UI by expressing side effects as sources of actions

Easy Support for Lazy Loading:

Even though it was always possible to use lazy loading with NgRx previous versions but it was not an easy task previously we had manually the manage loadings and unloadings of reducers. In this release they added the support for lazy loading officially.

@NgModule({
  imports: [
    StoreModule.forRoot(appReducers),
    EffectsModule.forRoot([Asource, Bsource]),
    RouterModule.forRoot([
      { path: ‘lazy’, loadModule: ‘./lazy.module#LazyModule’ }
    ])
  ]
})
export class AppModule { }

@NgModule({
  imports: [
    StoreModule.forFeature(‘lazy’, lazyReducers),
    EffectsModule.forFeature([Csource]),
    RouterModule.forChild(childRoutes)
  ]
})
export class LazyModule { }

Similar to Angular routers, NgRx is used for the forRoot of the main NgModule, and for the forFeature for the lazy-loaded one's.

Improved Testing:

NgRx separate the UI, side effect, and the state management. This alone makes testing more straightforward and enjoyable.
Reducer are synchronous and pure function, testing those were always as easy. But testing the effect class, which heavily rely on the RxJS, was bit tricky.
They came up with great solution to simplify the testing of RxJS observables — marble testing, which made the tests visualy easy to read. It was not that easy to use the marble for testing the effect class, but it has to be changed with NgRx4.

describe(‘My Effects’, () => {
  let effects: MyEffects;
  let actions: Observable;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyEffects,
        provideMockActions(() => actions),
        // other providers
      ],
    });

    effects = TestBed.get(MyEffects);
  });

  it(‘should work’, () => {
    actions = hot(‘—a-’, { a: SomeAction,  … });
    const expected = cold(‘—b’, { b: AnotherAction });
    expect(effects.someSource$).toBeObservable(expected);
  });
});

Rewritten Routers Integration:

NgRx help in the one of the hard problem in the software development i.e state management. But this is not only a part of the state managements story. Another one is the routers. Making sure that the NgRx and the routers work well together was the highest priority.
The main issue that was with NgRx 2 routers integration was that the stores and the routers were synchronized after-that fact. Which means that resolvers and the guards can not access the new states, which resulted in making it less useful. This meant that the stores could not cancel the navigations.
To fix this the only way out was to make the Angular router more pluggable. And once that was done, Redesigning the integration to make the stores update part of the navigation process.

NgRx3 is still crucial 

NgRx 3 has been the semi-official states management library for the Angular for quite a while. It is the crucial part of Angular ecosystems. That is why the version numbers are aligned with the core framework of the Angular.