Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
INTRODUCTION TO
Fabio Biondi / March 2018
1 / 89
JS DEVELOPER & TRAINER
Angular, React, Vue.js, Redux, RxJS, Typescript
Javascript ES6, HTML5, CSS3, SVG, Canvas
D3.js, Cre...
TOPICS
COMPONENT BASED APPROACH
WHAT'S REDUX
REDUX FUNDAMENTALS
ANGULAR / REDUX examples
REACT / REDUX examples
3 / 89
In Angular, React and most of modern javascript frameworks/libs
EVERYTHING IS A COMPONENT
4 / 89
IN THE REAL WORLD :(
UI is not divided in several components
but most of the time there is only a main (big) component for...
THE RESULT?
6 / 89
7 / 89
WHAT ARE THE PROBLEMS?
If application grows, the big picture is lost
Code is unpredictable.
Data flow is hard to follow => ...
A SOLUTION?
Apply properly Angular/React best practices, patterns, styleguides and
use a state management pattern, such as...
The first concept to understand is how to
organize your app in stateless components
10 / 89
COMPONENTS in ANGULAR (2+)
...
<menu [items]="users" (onItemClick)="active = $event"></menu>
<gmap [lat]="active.lat" [lng...
SAME in REACT
...
<Menu items={users} onItemClick={active => this.setActive(active)}" />
<GMap lat={active.lat} lng={activ...
COMPONENTS ARE THE BUILDING BLOCKS OF YOUR SPA
13 / 89
14 / 89
COMPONENT-BASED APPROACH
<navbar />
<div class="row">
<div class="col-md-4"> <!-- left column -->
<search />
<list />
<soc...
TOTALLY COMPONENT-BASED
<navbar />
<row>
<card [percent]="30"> <!-- left column -->
<search />
<list />
<social />
</card>...
17 / 89
STATELESS APPROACH in Angular: [input] and (output)
<navbar />
<row>
<card [percent]="30">
<search (load)="hotels = $event...
BY USING REDUX
<navbar />
<row>
<card [percent]="30">
<search (load)="action.load($event)" />
<list [items]="store.hotels"...
WHY IN COMPONENTS?
Each component manages a small part of the view
Separation of concerns
Reusable
Composable
Testability
...
So, WHAT'S THE GLUE?
How components can be updated,
can communicate or stay in sync with each others ?
21 / 89
DATA ARCHITECTURES BEFORE REDUX
Frequently solutions to handle data before Redux:
1. Events => spaghetti code. Hard to man...
23 / 89
24 / 89
25 / 89
26 / 89
Components are now framework-agnostic
27 / 89
Redux is the only one to know data and can modify it
28 / 89
HOW?
1) Avoid keeping application state in UI component itself
2) Instead we can handle it in a Redux store
State is easy ...
WHAT IS
A library that helps you manage the state
of your (large) applications
30 / 89
WHEN IS REDUX USEFUL?
SPA with complex data flow (and sophisticated UI)
Multiple views/routes that share data
Multiple comp...
32 / 89
MAIN BENEFITS
Decoupled architecture from UI
Predictable application state. One source of truth
Immutable state tree which...
DEBUG BENEFITS
Easy to test: no mocks, spies or stubs
Redux DevTools
Track state (and di )
Track actions
Skip / Jump to ac...
OTHER BENEFITS
Community
Ecosystem: a lot of Plugins & Enhancers
Persist / LocalStorage, Router, Forms, Middlewares, Log, ...
But the real first thing to know about Redux is...
36 / 89
... probably you don't need Redux
37 / 89
This architecture might seem like an overkill,
but the beauty of this pattern
is how well it scales to large and complex a...
REDUX FUNDAMENTALS
39 / 89
THREE PRINCIPLES OF REDUX
1. Single source of truth: Store
2. State is read-only
3. Changes are made with pure functions
S...
STORE, ACTIONS, REDUCERS: KEY-POINTS
1. The whole state of your app is stored in an object tree inside a single store.
2. ...
REDUX FLOW
42 / 89
43 / 89
44 / 89
REDUX BUILDING BLOCKS
Store, Actions, Reducers
45 / 89
1. STORE / STATE
A single JS object that contains the current state of the application:
{
configuration: { theme: 'dark' }...
STORE is a TREE of nodes
47 / 89
WHY I LOVE HAVING A SINGLE STORE? An example:
1. You (or your customer) discover a bug!
2. Store can be exported (in a JSO...
2. ACTIONS
Plain JS objects that represents somethings that has happened in the application. Similar to events.
{
type: SE...
You can track, jump or skip any action using REDUX Chrome DevTools
50 / 89
ACTION CREATORS
51 / 89
52 / 89
ACTION CREATORS: functions that create actions
actions/counterActions.js
export const INCREMENT = 'INCREMENT';
export cons...
COMPONENTS invoke action creators
components/counter.component.js|ts
<!-- angular -->
<button (click)="actions.increment()...
3. REDUCERS
A function that specify how the state changes in response to an action.
(like an event handler that determine ...
A reducer never modifies the state...
// wrong!
myArray.push('anything');
myObj.property = 'anything';
56 / 89
... but it returns an (updated) copy of the state
// merge by using Lodash / Underscore => 3rd party lib
return _.merge(st...
WHY WE CANNOT MUTATE THE ORIGINAL OBJECT?
1. After each action, REDUX expects a brand new object from the reducer, if ther...
Reducers should be a pure functions!
Same Input -> Same Output
59 / 89
What's an inpure function?
Any function that doesn’t alter data and doesn’t depend on external state (like DB, DOM, or glo...
Pure functions
Instead of the following:
function increment(state) {
state.count++; // NO! mutate the state
}
A pure funct...
REDUCERS
62 / 89
REDUCERS mutate state
reducers/counter.reducer.js
const INITIAL_STATE = { count: 0 };
function CounterReducer(state = INIT...
64 / 89
REDUX EXAMPLES
with Angular & React
65 / 89
angular-redux/store
npm install redux @angular-redux/store
66 / 89
LIVE EXAMPLE - REDUX COUNTER
67 / 89
/app/app.component.ts
1 i
EDITOR PREVIEW
EDIT ON STACKBLITZ
68 / 89
CRUD REDUX APP
in 5 steps
69 / 89
1. ROOT REDUCER: store structure
// store/index.ts
import { combineReducers } from 'redux';
import { User, Configuration, ...
2. CONFIGURE REDUX
// app.module.ts
@NgModule({
imports: [ NgReduxModule ], // <== redux module
declarations: [ AppCompone...
3. REDUCER
// store/users.reducer.ts
const INIT_STATE: User[] = [];
export function UsersReducer(state: User[] = INIT_STAT...
4. ACTION CREATOR (with async operations)
// actions/users.actions.ts
@Injectable()
export class UsersActions {
static USE...
5A. VIEW: get State
// views/dashboard.component.ts
import { Component } from '@angular/core';
import { Observable } from ...
5B. VIEW: get State and async pipe
// views/dashboard.component.ts
import { Component } from '@angular/core';
import { Obs...
5C. VIEW: get state and invoke actions
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
impor...
Do NOT you like to angular-redux/store?
Try ngrx. It's awesome!
ngrx is not a Redux binding (as Angular Redux/Store), it h...
MIDDLEWARES
NGRX e ects, Angular Redux Epics, Redux Thunk, Redux Observable, ...
78 / 89
79 / 89
Middleware in Angular by using React Thunk (used in Angular, React, ...)
export const USER_PENDING = 'USER_PENDING';
expor...
Middleware in Angular by using NGRX E ects (and RxJS 5.5+)
@Injectable()
export class UsersEffects {
// ...
@Effect() addU...
REACT & REDUX
82 / 89
Main Application Component
// index.js
import React from 'react';
import { render } from 'react-dom';
import { createStore...
App: application root component
Connect Redux to components
// app.jsx
class App extends Component {
render() {
return (
<...
Dashboard: Container
Connect Redux to components
// views/DashboardContainer.jsx
import * as React from 'react';
import { ...
DashboardView: Presentational component
Get state from redux (by props) and invoke actions
// views/DashboardView.jsx
expo...
And now? There's still a lot of stu to learn
Read the Redux Documentation
Watch "Getting Started with Redux" videos by Dan...
Facebook Groups:
ANGULAR - Developer Italiani
REACT Developer Italiani
JAVASCRIPT Developer Italiani
OPPORTUNITÀ Developer...
fabiobiondi.io
FOLLOW ME ON:
Facebook | YouTube | CodePen| LinkedIn
89 / 89
Nächste SlideShare
Wird geladen in …5
×

Introduction to Redux (for Angular and React devs)

327 Aufrufe

Veröffentlicht am

Why and when use Redux .
Includes examples in Angular and React

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Introduction to Redux (for Angular and React devs)

  1. 1. INTRODUCTION TO Fabio Biondi / March 2018 1 / 89
  2. 2. JS DEVELOPER & TRAINER Angular, React, Vue.js, Redux, RxJS, Typescript Javascript ES6, HTML5, CSS3, SVG, Canvas D3.js, CreateJS, TweenMax, Electron, Firebase Facebook Groups (Developer Italiani): Angular | React | Javascript | Opportunità/Job Profiles: fabiobiondi.io | LinkedIn | YouTube | CodePen | Facebook FABIO BIONDI 2 / 89
  3. 3. TOPICS COMPONENT BASED APPROACH WHAT'S REDUX REDUX FUNDAMENTALS ANGULAR / REDUX examples REACT / REDUX examples 3 / 89
  4. 4. In Angular, React and most of modern javascript frameworks/libs EVERYTHING IS A COMPONENT 4 / 89
  5. 5. IN THE REAL WORLD :( UI is not divided in several components but most of the time there is only a main (big) component for each view routes/views are often a component with a long html template and contain a lot of business logic (JS) into it Components are often stateful and/or there is an abuse of dependency injection Especially in Angular 5 / 89
  6. 6. THE RESULT? 6 / 89
  7. 7. 7 / 89
  8. 8. WHAT ARE THE PROBLEMS? If application grows, the big picture is lost Code is unpredictable. Data flow is hard to follow => Mistakes and bugs are very di cult to find App does not scale and it's not easy to mantain, to debug and to test. If developers leave the project it can became a nightmare since projects are often not so well-documented and nobody else really know how it works 8 / 89
  9. 9. A SOLUTION? Apply properly Angular/React best practices, patterns, styleguides and use a state management pattern, such as Redux 9 / 89
  10. 10. The first concept to understand is how to organize your app in stateless components 10 / 89
  11. 11. COMPONENTS in ANGULAR (2+) ... <menu [items]="users" (onItemClick)="active = $event"></menu> <gmap [lat]="active.lat" [lng]="active.lng"></gmap> <chart [title]="active.name" [config]="active.data"></chart> ... What's happen here? When a menu item is selected, the google map and chart components are populated with new data. Each component is responsable of its own behaviors and data flow should be handled by a parent 11 / 89
  12. 12. SAME in REACT ... <Menu items={users} onItemClick={active => this.setActive(active)}" /> <GMap lat={active.lat} lng={active.lng} /> <Chart title={active.name} config={active.data} /> ... 12 / 89
  13. 13. COMPONENTS ARE THE BUILDING BLOCKS OF YOUR SPA 13 / 89
  14. 14. 14 / 89
  15. 15. COMPONENT-BASED APPROACH <navbar /> <div class="row"> <div class="col-md-4"> <!-- left column --> <search /> <list /> <social /> </div> <div class="col-md-8"> <!-- right column --> <gmap /> </div> </div> <services /> 15 / 89
  16. 16. TOTALLY COMPONENT-BASED <navbar /> <row> <card [percent]="30"> <!-- left column --> <search /> <list /> <social /> </card> <card [percent]="70"> <!-- right column --> <gmap /> </card> </row> <services /> 16 / 89
  17. 17. 17 / 89
  18. 18. STATELESS APPROACH in Angular: [input] and (output) <navbar /> <row> <card [percent]="30"> <search (load)="hotels = $event" /> <list [items]="hotels" (itemClick)="hotel = $event" /> <social [items]="hotel.socials" /> </card> <card [percent]="70"> <gmap [coords]="hotel.location" /> </card> </row> <services [items]="hotel.services" /> In React you can use the same approach 18 / 89
  19. 19. BY USING REDUX <navbar /> <row> <card [percent]="30"> <search (load)="action.load($event)" /> <list [items]="store.hotels" (itemClick)="action.select($event)" <social [items]="store.hotel.socials" /> </card> <card [percent]="70"> <gmap [coords]="store.hotel.location" /> </card> </row> <services [items]="store.hotel.services" /> 19 / 89
  20. 20. WHY IN COMPONENTS? Each component manages a small part of the view Separation of concerns Reusable Composable Testability Semantic HTML: readable and simple to mantain NOTE: components should be stateless: just display stu and don't care about data flow 20 / 89
  21. 21. So, WHAT'S THE GLUE? How components can be updated, can communicate or stay in sync with each others ? 21 / 89
  22. 22. DATA ARCHITECTURES BEFORE REDUX Frequently solutions to handle data before Redux: 1. Events => spaghetti code. Hard to manage : P 2. Dependency Injection => unpredictable :( 3. Manage state in a stateful parent component => one of the best solutions so far : ) 22 / 89
  23. 23. 23 / 89
  24. 24. 24 / 89
  25. 25. 25 / 89
  26. 26. 26 / 89
  27. 27. Components are now framework-agnostic 27 / 89
  28. 28. Redux is the only one to know data and can modify it 28 / 89
  29. 29. HOW? 1) Avoid keeping application state in UI component itself 2) Instead we can handle it in a Redux store State is easy to handle and it's protected by the immutability guarantees of the Redux architecture. Dan Abramov, author of Redux 29 / 89
  30. 30. WHAT IS A library that helps you manage the state of your (large) applications 30 / 89
  31. 31. WHEN IS REDUX USEFUL? SPA with complex data flow (and sophisticated UI) Multiple views/routes that share data Multiple components that must be in sync (with no parent relationship) Scalability Testability Simplify debug Consistently: run in di erent environments (client, server, and native) 31 / 89
  32. 32. 32 / 89
  33. 33. MAIN BENEFITS Decoupled architecture from UI Predictable application state. One source of truth Immutable state tree which cannot be changed directly Components cannot mutate data. Less mistakes Maintanibility Organization Scale 33 / 89
  34. 34. DEBUG BENEFITS Easy to test: no mocks, spies or stubs Redux DevTools Track state (and di ) Track actions Skip / Jump to actions Time Travel Debug Export / Import store ... 34 / 89
  35. 35. OTHER BENEFITS Community Ecosystem: a lot of Plugins & Enhancers Persist / LocalStorage, Router, Forms, Middlewares, Log, Undo/Redo, ... Can be shared across frameworks / libraries React, Angular, Vue, Polymer, vanillaJS, ... It can be used client, server (SSR) and mobile It's (like) a pattern and used all over the world 35 / 89
  36. 36. But the real first thing to know about Redux is... 36 / 89
  37. 37. ... probably you don't need Redux 37 / 89
  38. 38. This architecture might seem like an overkill, but the beauty of this pattern is how well it scales to large and complex apps. Dan Abramov - Author of Redux 38 / 89
  39. 39. REDUX FUNDAMENTALS 39 / 89
  40. 40. THREE PRINCIPLES OF REDUX 1. Single source of truth: Store 2. State is read-only 3. Changes are made with pure functions Source: Redux documentation 40 / 89
  41. 41. STORE, ACTIONS, REDUCERS: KEY-POINTS 1. The whole state of your app is stored in an object tree inside a single store. 2. The only way to change the state tree is to emit an action. 3. To specify how the actions transform the state tree, you write pure reducers. 41 / 89
  42. 42. REDUX FLOW 42 / 89
  43. 43. 43 / 89
  44. 44. 44 / 89
  45. 45. REDUX BUILDING BLOCKS Store, Actions, Reducers 45 / 89
  46. 46. 1. STORE / STATE A single JS object that contains the current state of the application: { configuration: { theme: 'dark' } auth: { token: 'abc123' } users: { list: [{}, {}, {}], selected: { id: 123} } } Store represents a kind of local db of your data (but it's not saved anywhere. It is in memory) IMPORTANT: only actions can mutate the state, by using a reducer 46 / 89
  47. 47. STORE is a TREE of nodes 47 / 89
  48. 48. WHY I LOVE HAVING A SINGLE STORE? An example: 1. You (or your customer) discover a bug! 2. Store can be exported (in a JSON) 3. Store can be imported to re-create the scenario that has generated the bug Your app must be completely stateless in order to apply this workflow HOW? By using Redux Dev Tools. See next slides 48 / 89
  49. 49. 2. ACTIONS Plain JS objects that represents somethings that has happened in the application. Similar to events. { type: SET_CONFIG, // action type payload: { theme: 'light' } // action payload (data) } { type: USER_DELETE, payload: 1001 } { type: USER_ADD, payload: { name: 'Mario', email: ... } } 49 / 89
  50. 50. You can track, jump or skip any action using REDUX Chrome DevTools 50 / 89
  51. 51. ACTION CREATORS 51 / 89
  52. 52. 52 / 89
  53. 53. ACTION CREATORS: functions that create actions actions/counterActions.js export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT'; export const increment = () => { const action = { type: INCREMENT }; // action type dispatch(action); // `dispatch` is provided by redux }; export const decrement = () => { const action = { type: DECREMENT } dispatch(action); }; increment and decrement methods are invoked by the UI 53 / 89
  54. 54. COMPONENTS invoke action creators components/counter.component.js|ts <!-- angular --> <button (click)="actions.increment()"> add </button> In Angular, actions can be injected by using a service / provider <!-- react --> <button onClick={ () => props.increment() }> add </button> In React, actions are passed as props by a parent component (knows as container) 54 / 89
  55. 55. 3. REDUCERS A function that specify how the state changes in response to an action. (like an event handler that determine how state must be changed) 55 / 89
  56. 56. A reducer never modifies the state... // wrong! myArray.push('anything'); myObj.property = 'anything'; 56 / 89
  57. 57. ... but it returns an (updated) copy of the state // merge by using Lodash / Underscore => 3rd party lib return _.merge(state, payload) // clone current state and merge payload => ES5 return Object.assign({}, state, payload); // same as previous => object spread operator (ES2018) return { ...state, ...payload }; // clone array and add element => array spread operator (ES2015) return [ ...users, payload ]; The important concept is avoid mutating the store 57 / 89
  58. 58. WHY WE CANNOT MUTATE THE ORIGINAL OBJECT? 1. After each action, REDUX expects a brand new object from the reducer, if there are state updates 2. Redux compares the new object with the previous one, checking the memory location The comparison is done by using !==. A deep-compare match would be more expensive so the best way to compare 2 object is by using the memory location So, this comparison would not be possible if you directly modify the original state Read a great article about this topic 58 / 89
  59. 59. Reducers should be a pure functions! Same Input -> Same Output 59 / 89
  60. 60. What's an inpure function? Any function that doesn’t alter data and doesn’t depend on external state (like DB, DOM, or global variables) function increment(obj) { obj.count++; // NO mutate arguments } function increment(user) { service.doSomething(user); // NO side effects } function increment(input) { obj.count = Math.random(); // NO random, new Date(), ... } 60 / 89
  61. 61. Pure functions Instead of the following: function increment(state) { state.count++; // NO! mutate the state } A pure function should return a new copy of the object: function increment(state) { return { count: state.count + 1 // OK! return a new state }; } 61 / 89
  62. 62. REDUCERS 62 / 89
  63. 63. REDUCERS mutate state reducers/counter.reducer.js const INITIAL_STATE = { count: 0 }; function CounterReducer(state = INITIAL_STATE, action: any) { switch (action.type) { case INCREMENT: return { count: state.count + 1 }; case DECREMENT: return { count: state.count - 1 }; default: return state; // always return state as default } } Reducers are automatically processed each time an action is invoked 63 / 89
  64. 64. 64 / 89
  65. 65. REDUX EXAMPLES with Angular & React 65 / 89
  66. 66. angular-redux/store npm install redux @angular-redux/store 66 / 89
  67. 67. LIVE EXAMPLE - REDUX COUNTER 67 / 89
  68. 68. /app/app.component.ts 1 i EDITOR PREVIEW EDIT ON STACKBLITZ 68 / 89
  69. 69. CRUD REDUX APP in 5 steps 69 / 89
  70. 70. 1. ROOT REDUCER: store structure // store/index.ts import { combineReducers } from 'redux'; import { User, Configuration, Auth } from '../model'; import { UsersReducer, ConfigReducer, AuthReducer } from './store'; export class IAppState { users: User[]; // <=== config: Configuration; auth: Auth; }; export const rootReducer = combineReducers<IAppState>({ users: UsersReducer, // <=== config: ConfigReducer, auth: AuthReducer }); 70 / 89
  71. 71. 2. CONFIGURE REDUX // app.module.ts @NgModule({ imports: [ NgReduxModule ], // <== redux module declarations: [ AppComponent ], providers: [ UsersActions, ConfigActions ], // <== actions bootstrap: [ AppComponent ] }) export class AppModule { constructor( private ngRedux: NgRedux<IAppState> ) { this.ngRedux.configureStore( rootReducer, {}); // <== init redux } } 71 / 89
  72. 72. 3. REDUCER // store/users.reducer.ts const INIT_STATE: User[] = []; export function UsersReducer(state: User[] = INIT_STATE, action: any) { switch (action.type) { case UsersActions.USERS_ADD: // Add user to state return [...state, action.payload]; case UsersActions.USERS_DELETE: // Remove user from state return state.filter(user => user.id !== action.payload.id); default: return state; } } 72 / 89
  73. 73. 4. ACTION CREATOR (with async operations) // actions/users.actions.ts @Injectable() export class UsersActions { static USERS_ADD = 'USERS_ADD'; static USERS_DELETE = 'USERS_DELETE'; /* ... missing ... */ } add(user: User): void { this.http.post<User>('api/users/', user) .subscribe((newUser: User) => { this.ngRedux.dispatch({ // dispatch action type: UsersActions.USERS_ADD, payload: newUser // The new user }); }); } } 73 / 89
  74. 74. 5A. VIEW: get State // views/dashboard.component.ts import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { User } from '../model/user'; @Component({ selector: 'dashboard', template: '<list [data]="myUsers"></list>' }) export class DashboardComponent { @select('users') public users$: Observable<User[]>; // select state myUsers: User[]; constructor() { this.users$.subscribe(res => this.myUsers = res); } } 74 / 89
  75. 75. 5B. VIEW: get State and async pipe // views/dashboard.component.ts import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { User } from '../model/user'; @Component({ selector: 'dashboard', template: '<list [data]="myUsers | async"></list>' }) export class DashboardComponent { @select('users') public users$: Observable<User[]>; // select } 75 / 89
  76. 76. 5C. VIEW: get state and invoke actions import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { User } from '../model/user'; import { UsersActions } from '../actions/users.actions'; @Component({ selector: 'dashboard', template: `<list [data]="users$ | async" (delete)="actions.deleteUser($event)"></list>` }) export class DashboardComponent { @select('users') public users$: Observable<User[]>; // select constructor(public actions: UsersActions) { actions.getUsers(); } } 76 / 89
  77. 77. Do NOT you like to angular-redux/store? Try ngrx. It's awesome! ngrx is not a Redux binding (as Angular Redux/Store), it has been written from scratch and it widely use RxJS. It also includes middlewares, memoization, lazy-store/e ects and a lot of other cool stu out of the box. Anyway Angular Redux/Store is easier to learn. 77 / 89
  78. 78. MIDDLEWARES NGRX e ects, Angular Redux Epics, Redux Thunk, Redux Observable, ... 78 / 89
  79. 79. 79 / 89
  80. 80. Middleware in Angular by using React Thunk (used in Angular, React, ...) export const USER_PENDING = 'USER_PENDING'; export const USER_ERROR = 'USER_ERROR'; export const USER_ADD = 'USER_ADD'; export const pendingAction = params => { return { type: USER_PENDING, pending: true, error: false } }; export const errorAction = error => { return { type: USER_ERROR, pending: false, error } }; export const addAction = user => { return { type: USER_ADD, user, pending: false, error: false } }; export function addUser(user) { return function (dispatch) { dispatch(pendingAction(user)); // Pending Action return axios.post('/api/user', { ...user }) .then(res => dispatch(addAction(res.data))) // Success Action .catch(error => dispatch(errorAction(error))) // Error Action } } 80 / 89
  81. 81. Middleware in Angular by using NGRX E ects (and RxJS 5.5+) @Injectable() export class UsersEffects { // ... @Effect() addUser$ = this.actions$.ofType<AddUser>(UsersActions.ADD) .mergeMap((action: AddUser) => this.http.post('/api/users', user) .pipe( map(data => ({ type: UsersActions.ADD_SUCCESS, payload: data })), catchError(() => of({ type: UsersActions.ADD_FAILED })) ) ); // ... constructor( private http: HttpClient, private actions$: Actions ) {} } 81 / 89
  82. 82. REACT & REDUX 82 / 89
  83. 83. Main Application Component // index.js import React from 'react'; import { render } from 'react-dom'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from ''./reducers'; import App from './App'; const store = createStore(rootReducer); render(<Provider store={store}> <App /> </Provider>, document.getElementById('root')); WHAT WE DID: initialize Redux Store 83 / 89
  84. 84. App: application root component Connect Redux to components // app.jsx class App extends Component { render() { return ( <BrowserRouter> <div> <NavBar /> <Route exact path="/" component={HomeContainer} /> <Route path="/dashboard" component={DashboardContainer} /> <Route path="/another" component={AnotherContainer} /> </div> </BrowserRouter> ); } } 84 / 89
  85. 85. Dashboard: Container Connect Redux to components // views/DashboardContainer.jsx import * as React from 'react'; import { connect } from 'react-redux'; import { addUser, deleteUser } from "../../actions/usersActions"; import { DashboardView } from './view/dashboard'; const DashboardContainer = connect( state => ({ users: state.users }), { addUser, deleteUser } )(DashboardView); export default DashboardContainer; WHAT WE DID: we sent state and actions to the DashboardView component as props 85 / 89
  86. 86. DashboardView: Presentational component Get state from redux (by props) and invoke actions // views/DashboardView.jsx export const DashboardView = props => ( <div> <h1>{props.users.length} members</h1> <AddForm submit={user => props.addUser(user)}/> <Users {{...props}} onDelete={id => props.deleteUser(id)} /> </div> ); Presentational components should know nothing about Redux, so you can reuse them without it as well. 86 / 89
  87. 87. And now? There's still a lot of stu to learn Read the Redux Documentation Watch "Getting Started with Redux" videos by Dan Abramov Check the Redux binding for your favorite library Join my training courses: fabiobiondi.io ;) 87 / 89
  88. 88. Facebook Groups: ANGULAR - Developer Italiani REACT Developer Italiani JAVASCRIPT Developer Italiani OPPORTUNITÀ Developer Italiani 88 / 89
  89. 89. fabiobiondi.io FOLLOW ME ON: Facebook | YouTube | CodePen| LinkedIn 89 / 89

×