[AngularJS Ng-redux] Integrate ngRedux

Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually creating an application store, reducers and action creators. We have already made significant progress in simplifying state management within our application, but we have in fact only touched the surface of what Redux has to offer.

In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through this series. ngRedux is a project that provides angular bindings to redux to streamline integrating it into our application.

Install:

npm install --save redux ng-redux

Config:

import {categories, initialCategories, CategoriesActions} from './components/categories/category.state';
// import Store from './app.store';
import ngRedux from 'ng-redux';
//const store = new Store(categories, initialCategories);
const config = $ngReduxProvider => {
  'ngInject';
  // createStoreWith(1p, 2p, 3p, 4p)
  //1p: reducer
  //2P: middleware
  //3p: enhancer
  //4p: initial state
  $ngReduxProvider.createStoreWith(categories, [], [], initialCategories);
};

Previosuly, we use the stroe class we created, now we replace with ng-redux.

Using:

constructor($timeout, CategoriesActions, $ngRedux) {
    'ngInject';

    angular.extend(this, {
      $timeout,
      CategoriesActions
    });

    this.store = $ngRedux;
  }

In the controller, we can inject '$ngRedux' and assign it to stroe.

Then we can use it as the same before.

  $onInit() {
    this.unsubscribe = this.store.subscribe(() => {
       this.categories = this.store.getState();
    });

    this.store.dispatch(this.CategoriesActions.getCategoreis());

    this.$timeout(( )=> {
      const data = [
        {id: 0, name: 'Angular'}
      ];
      this.store.dispatch(this.CategoriesActions.getCategoreis(data));
    }, 2000);
  }

---

More than often we need to deal with multi reducers in our app.  So we need to combine those reducers to make it easy to use.

Import:

import { categories, initialCategories, CategoriesActions, category } from './components/categories/category.state';
import { combineReducers } from 'redux';
const rootReducers = combineReducers({
  categories,
  category
});

Then we can pass the 'rootReducer' to createStoreWith() function:

const config = $ngReduxProvider => {
  'ngInject';
  $ngReduxProvider.createStoreWith(rootReducers, []);
};

Now it affects how to getState() function used, now the function return our an object which container both 'categories' and 'category' state.

  $onInit() {
    this.unsubscribe = this.store.subscribe(() => {
       this.categories = this.store.getState().categories;
       this.currentCategory = this.store.getState().category;
    });

    this.store.dispatch(this.CategoriesActions.getCategoreis());
  }

Github