redux and angular - up and running
3 likes1,810 views
The document provides an overview of Redux, a design pattern for managing state in single-page applications, outlining its principles such as a single source of truth and pure functions for state transformation. It explains how to implement Redux in an Angular application, detailing the store's API and the use of middleware for asynchronous action handling. Additionally, it includes resources for further reading and practical examples for integrating Redux with Angular components.
![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 }
}](https://image.slidesharecdn.com/angular2-and-redux-160525062428/85/redux-and-angular-up-and-running-20-320.jpg)
![CONTAINER
COMPONENT COMPONENT
STORE
[properties] (events)
actions
state](https://image.slidesharecdn.com/angular2-and-redux-160525062428/85/redux-and-angular-up-and-running-32-320.jpg)
redux and angular - up and running
- 1. REDUX & ANGULAR UP & RUNNING NIR KAUFMAN
- 2. AGENDA what is redux? how to use redux? where Angular fits in? where to go from here?
- 4. REDUX IS A DESIGN PATTERN for managing a complex, ever changing state in a challenging modern single page applications
- 5. SINGLE SOURCE OF TRUTH the state of your whole application is stored within a single store
- 6. THE STATE IS READ ONLY the only way to mutate the state is to emit an action describing what happened
- 7. PURE FUNCTIONS to specify how the state is transformed by actions, you write a pure function.
- 8. PURE* FUNCTION ACTION NEXT STATE * No side-effects reducer
- 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; }
- 14. HOW TO USE REDUX
- 15. REDUX IS A TINY LIBRARY which contains a function for creating a store, and 4 other helpers functions that we can use.
- 16. import { createStore } from 'redux'; const store = createStore(reducer);
- 17. import { createStore } from 'redux'; const store = createStore(reducer);
- 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 } }
- 21. CONNECTING THE DOTS now we can dispatch actions and be notified when the state has changed.
- 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!
- 26. INTERCEPTING THE ACTION FLOW this is done using middleware which can catch the action before they hit the store. async flow
- 28. { LIVE CODING } implementing a simple logger as a middleware.
- 29. ANGULAR & REDUX
- 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.
- 33. BINDING COMPONENTS TO THE STORE it’s straightforward but requires a lot of boilerplate inside the component class.
- 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; } }
- 36. class TodoListComponent { @MapState('list') private list; @BindActions(addItem) private addItem; }
- 37. { LIVE CODING } let’s build the view layer using Angular2 components
- 38. NEXT STEPS
- 39. PLAY WITH THE DEMO https://github.com/nirkaufman/angular-redux-demo
- 40. Angular & Redux Workshop https://leanpub.com/redux-book REDUX BOOK
- 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
- 42. THANK YOU!
- 43. Read our blog: http://blog.500tech.com NIR KAUFMAN [email protected] Head of Angular Development @ 500Tech