Sharing Top Content from the Angular-sphere.

Angular 2 Application Architecture

  • The main idea of Flux is that the state of the application can be controlled by keeping it inside a data store.
  • In Flux the only way to modify data is to dispatch an Action, that will trigger the creation of a new state.
  • The action also contains all information needed to create the new state of the store, such as: the new Todo added, the new sort order, etc.
  • For example this is the reducer for the application data state: – – The reducer just branches the calculation of the new state and delegates it to other functions, or calculates the new state directly in the switch statement if that only takes a couple of lines.
  • The store can now be injected in any component, and used to dispatch actions: – – There are no real benefits point for storing state inside a store using Redux if we cannot make the state immutable in a practical way.

In this post we will explore how to design an Angular 2 application according to the Flux architecture, by using the Redux and Immutable.js libraries. Have a look at angular2-redux-store for a sample. We will go over the following topics:

Why is it so hard to build large single page apps

One of the biggest design changes that happened since we started building single page apps is that the state of the app is now completely on the client instead of the server.

The application state resides in the browser and is easily accessible for modification by any part of the app. The problem is that once the code gets larger and the team increases, this easy access to the application state starts to cause issues.

The danger of unconstrained mutable state

Allowing the state to be mutated from anywhere in the app at any time quickly gets out of hand. Bugs and subtle race conditions start creeping in, and its hard to refactor without unexpected side effects.

Keeping the frontend code maintainable is is all about:

The advantages of immutable state

If mutable state is dangerous, the safest alternative is to make our data read-only by default, or immutable. If the state needs to be changed we replace it by a new state in a controlled manner, but don’t mutate the existing state. This has two major advantages:

Applications have three…

Angular 2 Application Architecture