Angular ngrx / Basics

What it is?

Redux is a way to store in a centralized place data so that all the app can update flawlessly by subscribing to some events. For example if a component need to listen updates of "projects" content, he gets informed when this event occurs.

Links to start with

• Angular 2 and Redux simplified https://medium.com/beautiful-angular/angular-2-with-redux-using-ngrx-store-2f93a8ad0dd

• There is a official demo / starter app to get a global view on a ngrx based application

• Other Demo app of angular + redux on how he setup Redux in an angular 2/4 project.

• Tuto about ngrx for angular 2-4 by angular university why use it + a concrete example

• heavily commented main reducer of ngrx demo app

• UI state management with Redux in angular 4 in this tuto Hristo Georgiev explain how to use redux in the context of angular 4 to control not only data but also UI like window resizing, hide/display of element.

• Setting up ngrx

• Comprehensive Introduction to @ngrx/store A gist with detailed information to learn ngrx store an understand the difference with more classical way of doing it. very detailed with clear code examples.

• https://kimsereyblog.blogspot.fr/2017/07/managing-global-state-with-ngrx-store.html Step by step example of uses of the main ngrx concepts (store, reducer, selector...)

NGRX Selector

Selectors allow you to select part of the state to display it in component

• Understanding ngrx selector

• More in depth article on what is a selector

Go further / More specific articles

• Errors not to be done with NGRX

  http://brianflove.com/2017/11/01/ngrx-anti-patterns

• understanding the [] for ngrx action type

• Get state in effects

• Library of ngrx pattern by Victor Savkin

Reading blog university tutorial notes

• The tuto start with a description of the facebook counter bug that initiated the switch to a redux like architecture for Facebook homepage.

• Notion of viewModel which is the derivation of a model for the display purpose of a view.

• The transformation from view to view Model is done via a function called a Selector - the input of a Selector is the Model, and the output is the View Model

• the data is stored as a map rather that an array (optimized for by id query (same way firebase used))

Example map

• In the store we store both application model and UI state and user preference...

What to install

• store The main component (but not obligatory) to install the architecture. For example, you can use actions and effects without to the store

redux store architecture

• store dev tools Tools integrated with the chrome extension to debug ngrx powered application

• router store integration with the angular router

• effects Side effects.... (there is a different version for angular 2 and 4)

But since 4 version all those packages are put in one github repository. Installing each libs separately is though still needed.

npm install @ngrx/store @ngrx/store-devtools @ngrx/router-store-builds @ngrx/effects --save

Trigger an error is state is not correctly cloned in the reducer

npm install ngrx-store-freeze --save-dev

you should then have in your package.json something like

NGRX terminology

• store: the shared service managed by the ngrx library that manage state and trigger event when the state is changed

Store could be thought as the database in the store as a database analogy.

• state: Global object that store all global values stored in the store. Each feature module add a property to the store to make available the useful part of the global state

• reducer: main function where is defined the logic : (could be thought as the database tables). Practically the reducer have the role to merge / save the state modification with the state global state. Another explanation :

  The reducer is the thing that catches and handles the actions that are dispatched from your smart components (or from your action reducers), and it is also the thing that actually resets the state to a new, modified state.

Reducer could be thought as the database table in the store as a database analogy.

Reducer are a type of function in programation, that work on a collection of object and produce a final unique object by running function at each loop turn. A very clear definition and examples are available in this ngrx tutorial.

• selector: function that in charge to retrieved view model structure that are data as need by the UI.

Selector could be thought as the query in the store as a database analogy.

Link to utility functions createSelector or createFeatureSelector

• action: an action triggered by the user like clicking on a button, changing view that impact the global state. Action can be loading of data, for example The data have just finished loading, we trigger an action.

  Practically the purpose of an action file is the set the string identifier of an action MY_AWESOME_ACTION and set the type of the payload of the actions (passed to the effects)

• effect: a change to do when an action is triggered

• entity:

Who call the reducer function

Every times an action is triggered can be

• the router action

• ngrx special action at initialization

Ngrx Dev tools

The raw tab or tree tab allow navigating in the state values

• reducer the table

• the store the database as explained comment of example app book reducer