Angular NgRx

Question 1

What is state in context of ngrx?

Answer 1

It can be view state, user state (info), entity data, user selection input or any other data that application tracks

Question 2

The purpose of NgRx is

Answer 2

• Provide formal pattern for organizing app state into one single local state container, managing that state, and communicating state changes throughout components

Question 3

NgRX =

Answer 3

redux patter + angular

Question 4

Redux pattern helps us to

Answer 4

manage application state by providing one way dataflow throughout the application

Question 5

Redux patter - how it works

Answer 5

View (on user event)
updates the
Component, which dispatches an action
Action is send to reducer, that updates state In store

Question 6

Store (state) is

Answer 6

a single in-memory client-side state container

Question 7

Without ngrx we can use a service to retain some state

Answer 7

But with bigger application, we will have more services with similar purpose. Over time we will find ourselves with dozen of these little services

Question 8

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.

Answer 8

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.

Question 9

Ngrx helps with loos coupling

Question 10

Use NgRx When…

Answer 10

• 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)

Question 11

Don’t use NgRx if

Answer 11

• 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

Question 12

What is Redux Pattern?

Answer 12

A way to build a predicteble state container for JavaScript

Question 13

3 Redux Principles

Answer 13

1. Single source of truth called the store
2. State is read only and only changed by dispatching actions
3. Changes are made using pure functions called reducers

Question 14

What should not go in the redux store

Answer 14

• Unshared state
• Angular form state
• Non serializable state

Question 15

Exapmles ot actions to dispach to change a change

Answer 15

• 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

Question 16

Actions are events that have

Answer 16

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

Question 17

Use Reducers to change state. Examlpes:

Answer 17

• Set a userDetail property on login
• Toggle sideMenuVisible property on button click
• Set property to something when change data

Question 18

Actions with side efects - Use NGRX EFFECTS library for managing side efects

Question 19

Reducers

Answer 19

are pure functions and handle each state transition synchronously

Question 20

Advantages of the redux pattern

Answer 20

Centralized immutable state

Performance