What is state in context of ngrx?
It can be view state, user state (info), entity data, user selection input or any other data that application tracks
The purpose of NgRx is
- Provide formal pattern for organizing app state into one single local state container, managing that state, and communicating state changes throughout components
NgRX =
redux patter + angular
Redux pattern helps us to
manage application state by providing one way dataflow throughout the application
Redux patter - how it works
View (on user event)
updates the
Component, which dispatches an action
Action is send to reducer, that updates state In store
Store (state) is
a single in-memory client-side state container
Without ngrx we can use a service to retain some state
But with bigger application, we will have more services with similar purpose. Over time we will find ourselves with dozen of these little services
Without ngrx.
Example with service getting data with http.get.
On init in the component, we would get data each time user navigates to the component.
With frequently changing data, this might be desired. We could manually implement a data cache in our service.
But with Ngrx the store provides a client-side cache.
Ngrx helps with loos coupling
Use NgRx When…
- There is lots of state and little services. The store provides a convenient place to put UI state to retain it between router views
- When there are excessive HTTP requests. Store provides client-side cache
- When there are complex component interactions. It keeps components decoupled and helps with race condition issues
- It has great tooling (time travel debugging)
Don’t use NgRx if
- you’re new to Angular.
- If application is simple. Extra code required for Ngrx for a simple application
- If you already have a good state management system
What is Redux Pattern?
A way to build a predicteble state container for JavaScript
3 Redux Principles
- Single source of truth called the store
- State is read only and only changed by dispatching actions
- Changes are made using pure functions called reducers
What should not go in the redux store
- Unshared state
- Angular form state
- Non serializable state
Exapmles ot actions to dispach to change a change
- Login action after a login form submission
- toggle side menu action after a button click
- Retrieve data action when initializing a component
- Start global spinner action when saving data
Actions are events that have
type property desctribing the action and have optional data associated with them.
Immutability - if you need to change the state - change whole state, not just a property of it
Use Reducers to change state. Examlpes:
- Set a userDetail property on login
- Toggle sideMenuVisible property on button click
- Set property to something when change data
Actions with side efects - Use NGRX EFFECTS library for managing side efects
Reducers
are pure functions and handle each state transition synchronously
Advantages of the redux pattern
Centralized immutable state
Performance
