Angular ngrx / Basics
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
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.
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.
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.
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...)
Selectors allow you to select part of the state to display it in component
Errors not to be done with NGRX
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...
store The main component (but not obligatory) to install the architecture. For example, you can use actions and effects without to the store
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 --saveTrigger an error is state is not correctly cloned in the reducer
npm install ngrx-store-freeze --save-devyou should then have in your package.json something like
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:
Every times an action is triggered can be
the router action
ngrx special action at initialization
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