Angular + Redux = NGRX / A rxjs powered redux store

What it is?

Redux is a way to store in a centralized place data so that all the app can udpate flowlessly by subscribing to some events. For exemple if a component need to listen udpates of “projects” content, he get informed when this event occur.

NGRX Selector

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

Go further / More specific articles

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 the a model for the diplay 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

<img src=”../images/ngrx-store.png”, alt=”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 separetely 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). Pratically 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 programmation, 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. Pratically the purpose of a .action file is the set the string identifier of an action MY_AWESOME_ACTION and set the type of the 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 initialisation

Ngrx Dev tools

The raw tab or tree tab allow to navigate in the state values ngrx dev tools raw tab

Written on July 20, 2017