Redux data flow with angular
1 like366 views
This document discusses using Redux for data flow in Angular applications. Redux is a pattern that uses a single state tree and pure reducer functions to update state in response to actions. It advocates for single sources of truth, immutable state, and changes through pure functions. The ng2-redux library allows integrating Redux with Angular by providing the store via dependency injection and dispatching actions. Components can select state slices and dispatch actions to update state.
![Changes Are Made with Pure Functions
• To specify how the state is transformed by actions, you write a pure
function
function groceryItemReducer(state, action) {
switch (action.type) {
case 'ADD_GROCERY_ITEM':
return object.assign({}, state, {
groceryItems: [
action.item,
…state.groceryItems
]
};
default:
return state;
}
}](https://image.slidesharecdn.com/reduxdataflowwithangular-170524114712/85/Redux-data-flow-with-angular-18-320.jpg)
![Reducers
• Change the state in response to things that happened in the
application
• Pure functions
function groceryItemReducer(state, action) {
switch (action.type) {
case ADD_GROCERY_ITEM:
return object.assign({}, state, {
groceryItems: [
action.item,
…state.groceryItems
]
};
default:
return state;
}
}
Reducers](https://image.slidesharecdn.com/reduxdataflowwithangular-170524114712/85/Redux-data-flow-with-angular-23-320.jpg)
![ng2-redux - Setup
• Add the module
• Create the store and provide it in the main module
import { NgReduxModule, NgRedux } from 'ng2-redux';
@NgModule({
imports: [ /* ... */, NgReduxModule ]
})
class AppModule {
constructor(ngRedux: NgRedux<IAppState>) {
ngRedux.provideStore(store);
}
}](https://image.slidesharecdn.com/reduxdataflowwithangular-170524114712/85/Redux-data-flow-with-angular-34-320.jpg)
Redux data flow with angular
- 2. REDUX DATA FLOW WITH ANGULAR
- 5. Service Component Service ComponentComponent Component Component Service Service Component Service
- 7. Then you make a small change…
- 9. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 8 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
- 10. Agenda • The Redux pattern • Combining Redux and Angular • ng2-redux library in a nutshell
- 11. Known SPA Complexity Solutions • Command Query Responsibility Segregation (CQRS) • Event Sourcing • Flux • And more
- 12. Redux • Design pattern based on Flux • But it’s not Flux! • Predictable state container for JavaScript apps
- 13. Redux Principles 1. Single source of truth
- 14. Single Source of Truth • The application state is stored in an object tree within a single store let state = store.getState();
- 15. Redux Principles 1. Single source of truth 2. State is read-only
- 16. State is Read-Only • The only way to mutate the state is to emit an action describing what happened store.dispatch({ type: 'ADD_GROCERY_ITEM', item: { productToBuy: 'Milk' } }); store.dispatch({ type: 'REMOVE_GROCERY_ITEM', index: 3 });
- 17. Redux Principles 1. Single source of truth 2. State is read-only 3. Changes are made with pure functions
- 18. Changes Are Made with Pure Functions • To specify how the state is transformed by actions, you write a pure function function groceryItemReducer(state, action) { switch (action.type) { case 'ADD_GROCERY_ITEM': return object.assign({}, state, { groceryItems: [ action.item, …state.groceryItems ] }; default: return state; } }
- 19. Let’s drill down
- 21. Actions • Plain JavaScript objects • Include • Type – action type • Payload – the change that should occur let action = { type: 'ADD_GROCERY_ITEM', item: { productToBuy: 'Milk' } }; Action Creators
- 22. Action Creators • Functions that return actions const ADD_GROCERY_ITEM = 'ADD_GROCERY_ITEM'; function addGroceryItem(item) { return { type: ADD_GROCERY_ITEM, item: item }; } Action Creators
- 23. Reducers • Change the state in response to things that happened in the application • Pure functions function groceryItemReducer(state, action) { switch (action.type) { case ADD_GROCERY_ITEM: return object.assign({}, state, { groceryItems: [ action.item, …state.groceryItems ] }; default: return state; } } Reducers
- 24. Store • Only one store object • Store data accessed through getState function • Updates only in response to dispatching an action import {createStore} from ‘redux’; import {groceryItemReducer} from ‘./reducers/groceryItemReducer’; const store = createStore(groceryItemReducer); Store
- 25. Redux Data Flow Action Creators View ReducersStore interaction (click, mouse etc.) dispatch(action) (previous state, action) (new state) (current state)
- 26. Redux Data Flow – Cont. Action Creators View ReducersStore interaction (click, mouse etc.) dispatch(action) (previous state, action) (new state) (current state) Outside Action (push, Ajax callback and etc.)
- 27. Redux Library API • Redux is a small and compact library: • createStore(reducer) • combineReducers(reducers) • applyMiddleware(middlewares) • compose(functions) • bindActionCreators(creators, dispatch) • Store API: • store.dispatch(action) • store.getState() • store.subscribe(listener)
- 28. DEMO: REDUX IN ACTION
- 29. Redux Middleware • Extension point between dispatching an action and the reducer • Middleware examples: • Logging • Async operations • Routing const middleware = store => next => action => { // do something before dispatcher let result = next(action); // do something after dispatcher return result; } const store = createStore(reducer, applyMiddleware(middleware));
- 32. Angular and Redux • Redux can be applied in Angular oriented applications • It’s a data flow pattern • Popular Angular & Redux libraries: • ng2-redux • ngrx/store
- 33. NG2-REDUX https://github.com/angular-redux/ng2-redux npm install --save ng2-redux
- 34. ng2-redux - Setup • Add the module • Create the store and provide it in the main module import { NgReduxModule, NgRedux } from 'ng2-redux'; @NgModule({ imports: [ /* ... */, NgReduxModule ] }) class AppModule { constructor(ngRedux: NgRedux<IAppState>) { ngRedux.provideStore(store); } }
- 35. ng2-redux - Usage • Use the @select decorator and dispatch function: class App { @select() counter: Observable<number>; constructor(private ngRedux: NgRedux<IAppState>) {} increment() { this.ngRedux.dispatch({ type: INCREMENT}); } }
- 36. DEMO: REDUX + ANGULAR
- 37. Summary • Redux • Is a data flow design pattern • Reduces complexity when building big SPAs • Can be applied in Angular apps
- 38. Resources • Redux: https://github.com/reactjs/redux • ng2-redux: https://github.com/angular-redux/ng2-redux • ngrx/store: https://github.com/ngrx/store • My Blog – http://www.gilfink.net • Follow me on Twitter – @gilfink
- 39. Thank You!