Building a Redux Application Using Angular

State management has been an ongoing issue in front-end frameworks. Front-end frameworks' key tenet of state mutation at multiple levels makes the standard MVC (Model-View-Controller) approach ineffective. This multi-layered state mutation was evident in Angular 1, where the logic for managing the application state was distributed between directives, controllers, and service, and each level had its own logic for mutating the state. The segmented application state became prone to causing inconsistencies and was difficult to test.

Such issues have become more apparent and difficult to circumvent as front-end applications started to become increasigly complex and more reactive to user input. However, increasingly popular traits of AngularJS application development, such as an emphasis on functional programming, have given birth to a novel state management model called Redux. Redux centralizes the state into a single entity, granting developers access to the most recent state anywhere in the application.

Even though Redux arose through the React community, third-party libraries such as ngrx/store and extensions such as rxJS, have made Redux an equally suitable concept for AngularJS app development services.

In this guide, I will cover the core concepts of Redux and how they boost Angular 2 applications.

Main Concepts of Redux

Redux comprises three main parts

• The main store

• Reducers

• Actions

Each of these parts plays a different role in the mutation of the application's state. Middlewares, which are used to handle asynchronous requests (such as API calls), will be covered in part two.

The Main Store

The store combines the whole application state into a single entity, acting as the database for the web application. The store is broken down into different states, which represent different types of data in the application. The state is immutable, but it can be altered by explicitly defined actions. Thus, state mutation is restricted and centralized, simplifying the debugging process and making code more understandable.

Reducers

If the store is the database of the application, the reducers are the tables. Reducers represent slices, or structures in the application that are composed in a particular fashion. A reducer is a pure function that defines how a slice of the state is going to change when an action is being dispatched. It accepts two arguments, the previous state and an action, and returns the new state.

export interface Reducer<T> {
  (state: T, action: Action): T;
}

export const itemsReducer: ActionReducer<number> = (state = [], action: Action) => {
  switch (action.type) {
    case ADD_ITEM: //adding an item
      const item:Item = action.payload;
      //KEEPING THE STATE IMMUTABLE:
      // We don't perform actions that alter the state such as
      // array.push, array.shift and so on.
      // Instead, we concatenate the item, preserving the state.
      return [ ...state, item ];
    }

    case REMOVE_ITEM://removing the item
    // Again, we don't remove the item, we just filter the new state so
    // that it won't contain the item we're removing
      return state.filter(item => {
        return item.id !== action.payload.id;
      });
    }
}

export interface Action {
 type: string;
 payload?: any;
}

//making an action for adding an item
dispatch({type: ADD_ITEM, payload: {id: 1, name: 'An item' , category: 'miscellaneous'}})

//getting a single slice of the state
store.select('items')

//combining multiple slices
Observable.combineLatest(
  store.select('items'),
  store.select('categories'),
  (items, categories) => {

})