Weitere ähnliche Inhalte Ähnlich wie redux and angular - up and running (20) Kürzlich hochgeladen (20) redux and angular - up and running4. REDUX IS A
DESIGN PATTERN
for managing a complex, ever changing state
in a challenging modern single page applications
6. THE STATE IS
READ ONLY
the only way to mutate the state is to emit
an action describing what happened
9. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}
10. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}
11. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}
12. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}
13. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}
15. REDUX IS A
TINY LIBRARY
which contains a function for creating a store,
and 4 other helpers functions that we can use.
19. THE STORE IS SIMPLE
TO UNDERSTAND
we can implement a working store
in less then 30 lines of code.
20. function createStore(reducer) {
let state = null;
const listeners = [];
function getState() {
return state;
}
function dispatch(action) {
state = reducer(state, action);
listeners.forEach(listener => listener())
}
function subscribe(listener) {
listeners.push(listener);
return function () {
let index = listeners.indexOf(listener);
listeners.splice(index, 1)
}
}
dispatch({ type:’@@INIT' });
return { getState, dispatch, subscribe }
}
23. UI IS RENDERED
SOMETHING HAPPENED
ACTION DISPATCHED
STATE CHANGED
UI IS RENDERED
SOMETHING HAPPENED
ACTION DISPATCHED
STATE CHANGED
SOMETHING HAPPENED
25. { LIVE CODING }
let’s build a traffic light and see
redux in action!
28. { LIVE CODING }
implementing a simple logger
as a middleware.
30. JUST THE VIEW
api as actions
logic in middlewares & reducers
state inside a store
31. ANGULAR APP IS A
TREE OF COMPONENTS
each component is responsible for rendering a
a pert of the state, or dispatching actions.
34. NPM TO THE RESCUE!
FIND AN ADAPTOR
I will use the ‘angular2-redux-bindings’
for this example
35. class TodoListComponent {
constructor(){
this.unsubscribe = store.subscribe( () => this.renderList )
}
ngOnInit(){
this.renderList()
}
ngOnDestroy(){
this.unsubscribe()
}
addItem(item){
store.dispatch({
type: 'ADD_ITEM',
payload: item
})
}
renderList(){
this.list = store.getState().list;
}
}
37. { LIVE CODING }
let’s build the view layer using
Angular2 components
39. PLAY WITH THE DEMO
https://github.com/nirkaufman/angular-redux-demo
41. Angular & Redux Workshop
FURTHER READING
REDUX
http://redux.js.org/
https://egghead.io/series/getting-started-with-redux
CQRS & EVENT SOURCING
https://msdn.microsoft.com/en-us/library/dn568103.aspx
https://msdn.microsoft.com/en-us/library/dn589792.aspx
ANGULAR 2
angular-2-change-detection-explained.html