NGRX
Reactive State for Angular
NGRX
Reactive State for Angular
Tony Scialo
SSE @ CSX
@tony-scialo
tonywritescode.com
what
is
Â
state
-
response data
-
user info
-
user input
-
ui state
-
router/location
state
the representation of our application
at a certain point in time
WHY?
The Problem:
model
model
view
view
view
???
FLUX!
make state
predictable!
action
dispatcher
store
view
unidirectional
data
flow
action
dispatcher
store
view
store
a controlled state container designed to help write performant, consistent applications
controlled state container
holds the data of our application
~ Tony
store
!=
state
store
component
action
reducer
state
state
export interface State {
todos: string[];
}
how to
update
Â
state
action
action
dispatcher
store
view
action
helper methods, collected into a library, that create an action from method parameters, assign it a type and provide it to the dispatcher
libary
unique method that tells the dispatcher what to do to the state
~ Tony
action
const addTodoAction = {
type: 'ADD_TODO',
payload: string
};
const completeTodoAction = {
type: 'COMPLETE_TODO',
payload: string
};action
dispatcher
store
view
dispatcher
a singleton used to broadcast payloads to callbacks registered by the store
calls methods registered by the store
~ Tony
dispatcher
todoDispatcher.register(function(payload) {
if (payload.type === 'ADD_TODO') {
store.todos.add(payload);
}
});
dispatcher
todoDispatcher.dispatch({
action: 'ADD_TODO',
payload: 'Call Mom'
});
action
dispatcher
store
view
flux
!=
ngrx
flux
+ stuff
==
ngrx
Andrew Clark
Dan Abramov
react conf 2016
Flux
Redux
NGRX
NGRX
what
is
Â
redux
Flux
Redux
single store
one source of truth
no dispatcher
immutable state
multiple source of truth
singleton dispatcher
mutable state
multiple store
store
store
VS
single source of
truth
no dispatcher
immutable state
store
component
action
reducer
state
event
store
component
action
reducer
state
event
???
a word made up by redux to confuse you
~ Dave Ceddia
var letters = ['r', 'e', 'd', 'u', 'x'];
var word = letters.reduce(
function(accumulatedResult, arrayItem) {
return accumulatedResult + arrayItem;
},
'');
console.log(word) // => "redux"Array.prototype.reduce
Redux Reducer
(state, action) => new state
function wordReducer(state, action) {
switch(action.type) {
case 'ADD_LETTER':
return state + action.letter;
default:
return state;
}
}Redux Reducer
Why Reducer?
Pure Function
Testing
Immutable
Optimize UI
rEdUcErS aRe PuRe FuNcTiOnS...
store
component
action
reducer
state
click
event
todo app
store
component
action
reducer
state
add
todo
current
state
todo app
store
component
action
reducer
state
new
state
todo app
store
component
action
reducer
state
todos: {'Call Mom'}
todo app
you
flux
redux
NGRX
ngrx
reactive state management for angular apps
inspired by redux
ngrx
redux
npm install @ngrx/store
@ngrx/store-devtools --save
store
component
action
reducer
state
click
event
todo app
"You should use ngrx"
you
your boss
using ngrx
no state management
flux
ngrx
going back to jQuery
"Hey kid, I've got some ngrx down here"
when you haven't told someone about ngrx in 5 minutes
you not using ngrx
me