Downloaded 45 times
![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/75/redux-and-angular-up-and-running-20-2048.jpg)
![CONTAINER COMPONENT COMPONENT STORE [properties] (events) actions state](https://image.slidesharecdn.com/angular2-and-redux-160525062428/75/redux-and-angular-up-and-running-32-2048.jpg)
Uploaded byNir Kaufman
redux and angular - up and running
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.
redux and angular - up and running
- 1. REDUX & ANGULAR UP& RUNNING NIR KAUFMAN
- 2. AGENDA what is redux? howto use redux? where Angular fits in? where to go from here?
- 3.
- 4. REDUX IS A DESIGNPATTERN for managing a complex, ever changing state in a challenging modern single page applications
- 5. SINGLE SOURCE OF TRUTH thestate of your whole application is stored within a single store
- 6. THE STATE IS READONLY the only way to mutate the state is to emit an action describing what happened
- 7. PURE FUNCTIONS to specifyhow 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 USEREDUX
- 15. REDUX IS A TINYLIBRARY 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);
- 18.
- 19. THE STORE ISSIMPLE TO UNDERSTAND we can implement a working store in less then 30 lines of code.
- 20. function createStore(reducer) { letstate = 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 wecan dispatch actions and be notified when the state has changed.
- 22.
- 23. UI IS RENDERED SOMETHINGHAPPENED ACTION DISPATCHED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED ACTION DISPATCHED STATE CHANGED SOMETHING HAPPENED
- 24.
- 25. { LIVE CODING} let’s build a traffic light and see redux in action!
- 26. INTERCEPTING THE ACTION FLOW thisis done using middleware which can catch the action before they hit the store. async flow
- 27.
- 28. { LIVE CODING} implementing a simple logger as a middleware.
- 29.
- 30. JUST THE VIEW apias actions logic in middlewares & reducers state inside a store
- 31. ANGULAR APP ISA TREE OF COMPONENTS each component is responsible for rendering a a pert of the state, or dispatching actions.
- 32.
- 33. BINDING COMPONENTS TO THESTORE it’s straightforward but requires a lot of boilerplate inside the component class.
- 34. NPM TO THERESCUE! 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') privatelist; @BindActions(addItem) private addItem; }
- 37. { LIVE CODING} let’s build the view layer using Angular2 components
- 38.
- 39. PLAY WITH THEDEMO https://github.com/nirkaufman/angular-redux-demo
- 40. Angular & ReduxWorkshop https://leanpub.com/redux-book REDUX BOOK
- 41. Angular & ReduxWorkshop 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.
- 43. Read our blog: http://blog.500tech.com NIRKAUFMAN nir@500tech.com Head of Angular Development @ 500Tech