[AngularJS] Write a simple Redux store in AngularJS app

Posted 2020-08-19 Answer1215

The first things we need to do is create a reducer: 

/**
 * CONSTANT
 * @type {string}
 */
export const GET_CATEGORIES = "GET_CATEGORIES";

/**
 * INIT VALUE
 */
export const initialCategories = [
  {id: 0, name: ‘Development‘},
  {id: 1, name: ‘Design‘},
  {id: 2, name: ‘Exercise‘},
  {id: 3, name: ‘Humor‘}
];

/**
 * REDUCERS
 * @type {string}
 */
export const categories = (state = initialCategories, {type, payload}) => {
  switch(type) {
    case GET_CATEGORIES:
      return payload || state;
    default:
      return state;
  }
};

It has some default initialize data. What it does is just simply return the state.

 

Then let‘s create a gloable store for the app, which has two methods, getState, dispatch.  Two props: reducer, state.

class Store {
  constructor(reducer, initialState) {
    this.reducer = reducer;
    this.state=  initialState;
  }

  getState() {
     return this.state
  }

  dispatch() {
     this.state = this.reducer(this.state, action);
  }

}

 

Once we got that, we are going to init our store:

import {categories, initialCategories} from ‘./components/categories/category.state‘;
import Store from ‘./app.store‘;
const store = new Store(categories, initialCategories);

We passed in categoreis reudcer and the initialCategories state.

 

To make it available to Angular APP. we need to make it injectable:

let appModule = angular.module(‘app‘, [
    CommonModule.name,
    ComponentsModule.name
  ])
    .value(‘store‘, store)

 

Then we can use it in our app:

class CategoriesController {
  constructor(store) {
    ‘ngInject‘;

    angular.extend(this, {
      store
    });
  }

  $onInit() {
    this.store.dispatch({type: GET_CATEGORIES});
    this.categories = this.store.getState();
  }
}

 

---

 

 

Now we are going to simply the code a little bit, we going to make a subscribe method so that we don‘t need to call getState() method everytime after we dispatch an action.

You can think that the subscribe method is a just callback function which each time we dispatch an action, it will be called. And inside the callback function, we will call this.store.getState() to get the value.

class Store {
  constructor(reducer, initialState) {
    this.reducer = reducer;
    this.state = initialState;
    this.listeners = [];
  }

  getState() {
    return this.state;
  }

  dispatch(action) {
    this.state = this.reducer(this.state, action);
    this.listeners.forEach((l) => l());
  }

  subscribe(listener) {
    this.listeners = [
      ...this.listeners,
      listener
    ];

    // return an unsubscribe function
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    }
  }
}

export default Store;

class CategoriesController {
  constructor($timeout, store) {
    ‘ngInject‘;

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

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

    this.store.dispatch({type: GET_CATEGORIES});
  }
}

 

---

 

 

Currently inside the dispatch() metod, we pass in an object with type and payload. It would be better if we can manage those action in a single place. There is where Action creator comes in to play.

/**
 * ACTIONS CREATOR
 */
export const CategoriesActions = () => {
  const getCategoreis = (categories) => {
    return {type: GET_CATEGORIES, payload: categories}
  };

  const getCurrentCategory = (currentCategory) => {
    return {type: GET_CURRENT_CATEGORY, payload: currentCategory}
  };

  return {
    getCategoreis,
    getCurrentCategory
  };
};

 

To make it avaiable to Angular App, we can create a factory for this:

let appModule = angular.module(‘app‘, [
    CommonModule.name,
    ComponentsModule.name
  ])
    .value(‘store‘, store)
    .factory(‘CategoriesActions‘, CategoriesActions)
  .component(‘app‘, AppComponent)

 

Then we can use it inside the controller:

  constructor($timeout, store, CategoriesActions) {
    ‘ngInject‘;

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

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

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

  onCategorySelected(currentCategory) {
    this.currentCategory = category(this.currentCategory, this.CategoriesActions.getCurrentCategory(currentCategory));
  }