Managing State In Angular with Redux

Passing state between child and parent components can be cumbersome in larger Angular projects. Using Redux in these projects can greatly simplify state management, but we have to get past the initial learning curve. In this presentation we will look at the pattern Redux follows, discuss Reducers, Action Creators and State. We will examine Redux's use of the pub/sub pattern and reliance on immutability.

Transcript

1. Managing State In Angular with Redux
   Thursday January 11, 2018
   Doug Corbett
   dougccorbett@gmail.com
   

   View Slide

2. Basic State Management in Angular
   1
   Anatomy of a Redux Implementation
   3
   Final Thoughts
   4
   Basic Redux Ideas
   2
   Agenda
   

   View Slide

3. on
   Basic State Management
   in Angular
   

   View Slide

4. Component State (DOM)
   Parent Component
   Child Component
   Grandchild Component
   (Property binding) (Event binding)
   * Reactive Forms
   

   View Slide

5. Demo
   

   View Slide

6. Singleton Services
   authService
   currentUser
   firstName
   lastName
   permissions
   isAdmin
   browsingHistory
   orderService
   orderList
   productList
   currentOrders
   productList
   cartService
   productList
   currentItem
   productService
   productList
   currentProduct
   featuredProducts
   trendingProducts
   bestSellingToys
   moviesOnSale
   bestSellingBooks
   reccomendedProducts
   

   View Slide

7. Singleton Services
   pmtMethodService
   pmtMethodList
   defaultMethod
   featuredProducts
   trendingProducts
   bestSellingToys
   moviesOnSale
   bestSellingBooks
   reccomendedProducts
   membershipService
   profileService messagingService
   rentalService deviceMgmtService
   videoService
   authService
   currentUser
   firstName
   lastName
   permissions
   isAdmin
   browsingHistory
   orderService
   orderList
   productList
   currentOrders
   productList
   cartService
   productList
   currentItem
   productService
   productList
   currentProduct
   featuredProducts
   trendingProducts
   bestSellingToys
   moviesOnSale
   bestSellingBooks
   reccomendedProducts
   

   View Slide

8. Demo
   

   View Slide

9. Redux
   • Data Architecture Pattern
   • Characteristics
   • Centralized State Management
   • Immutability
   • Pub/Sub communication between State Store and
   listening components
   

   View Slide

10. on
    Basic Redux Ideas
    

    View Slide

11. Why?
    • More complex apps become easier to work with using
    centralized state.
    • Property binding between parent and child components can
    run into problems with larger applications.
    • Hard to get a picture of the entire application’s state without
    centralized state.
    • Developers have one place to look for state instead of
    components and services.
    • Undo/Redo
    • Testability
    

    View Slide

12. Centralized State Management
    • Can view the state of the entire application easily
    • Changes to state happen in one place
    • Changes to the state can be subscribed to and unsubscribed
    from so dependent component can react to state changes
    efficiently.
    

    View Slide

13. Immutability
    • The practice of not modifying values in memory directly,
    but creating new values in memory and changing a
    variable to point to the new location.
    • Avoid side effects
    • Fast
    • Makes multi threaded apps safer by avoiding locking and
    race conditions
    • Increased Garbage Collector processing and memory
    usage
    

    View Slide

14. Pub/Sub Communication
    • Loose coupling
    • Efficient communication between dispatchers and
    subscribers
    

    View Slide

15. on
    Anatomy of a Redux
    Implementation
    

    View Slide

16. Redux Elements
    • Action
    • Reducer
    • State
    Reducer
    State
    Action
    

    View Slide

17. State
    • An interface that represents the structure of the state of the
    application that needs to be available to the entire application.
    export interface AppState {
    currentUser: UserProfile,
    recentlyViewedProducts: Array,
    cart: Array
    }
    

    View Slide

18. Action
    • Objects that represent some kind of action in the system. It is
    comprised of two parts, an action identifier and, optionally, a payload.
    {
    type: ‘ADD_PRODUCT_TO_CART’,
    product: {
    “title’: “Girls bicycle”,
    “description”: “Two wheels and ribbons”,
    “quantity”: 100
    }
    }
    

    View Slide

19. Reducer
    • A reducer takes an action and the old state and returns a new state.
    • It does not change state directly.
    • It is a “pure function”, meaning that based on the same input, it
    returns the same output without side effect.
    import { ADD_PRODUCT_TO_CART } from ‘./cart.actions’
    const initialState: AppState = { cart: [] }
    export const cartReducer: Reducer = (state: AppState = initialState, action: Action): AppState => {
    switch(action.type) {
    case ‘ADD_PRODUCT_TO_CART’:
    return { Object.assign({}, state, { cart: state.cart.concat( (action).product; ) }
    }
    default: return state;
    }
    }
    

    View Slide

20. Redux Elements
    • Action
    • Reducer
    • State
    • Store
    • Component
    Reducer
    Action
    Component
    Action (string)
    Data (object)
    Store
    State
    

    View Slide

21. Triggering Components
    • These are the components that intend to indirectly change
    state. They do this by dispatching an Action Object to the
    Store.
    store.dispatch({
    type: ‘ADD_PRODUCT_TO_CART’,
    product: {
    “title’: “Girls bicycle”,
    “description”: “Two wheels and ribbons”,
    “quantity”: 100
    }
    } as AddProductAction);
    

    View Slide

22. Store
    • Object responsible for persisting and changing state.
    // app.store.ts
    let store: Store == createStore(cartReducer);
    export const AppStore = new InjectionToken(‘App.store’);
    const devtools: StoreEnhancer = window[‘devToolsExtension’] ? window[‘devToolsExtension’]() : f => f;
    …
    export createAppStore(): Store {
    return createStore( reducer, compose(devtools) );
    }
    export const appStoreProviders = [
    { provide: AppStore, useFactory: createAppStore }
    ];
    

    View Slide

23. Redux Elements
    • Action
    • Reducer
    • State
    • Store
    • Component
    • Action Creator
    • Observer
    Reducer
    Component
    Store
    State
    Action Creator
    Action
    Action (string)
    Data (object)
    Observer
    

    View Slide

24. Action Creators
    • This is an optional convenience helper object that takes a payload and
    creates an action class with an internally specified action and provided
    payload.
    • This is not specifically required, but leverages strong typing to
    eliminate typing defects and improves code readability.
    // cart.actions.ts
    import { Action, ActionCreator } from ‘redux’
    export const ADD_PRODUCT_TO_CART: string ‘ADD_PRODUCT_TO_CART’;
    export const addProductToCart: ActionCreator = (product) => ( {
    type: ADD_PRODUCT_TO_CART,
    product: product
    } );
    

    View Slide

25. Observers
    • Any component that subscribes to state changes
    constructor(@Inject(AppStore) private store: Store) {
    store.subscribe(() => this.updateState());
    this.updateState();
    }
    updateState() {
    // getUnreadMessagesCount is a selector function
    this.unreadMessagesCount = getUnreadMessagesCount(this.store.getState());
    }
    

    View Slide

26. Other Concepts
    • rootReducer – every app has one starting reducer and it may possibly
    have sub reducers below that.
    • State Slices – a way of grouping related reducers, actions and state
    away from those unrelated.
    

    View Slide

27. Final Thoughts
    

    View Slide

28. Final Thoughts
    • The Redux pattern takes some getting used to.
    • Redux is designed to make things easier for large projects but at a cost.
    • Redux emerged out of the React ecosystem and you are likely to
    encounter it.
    • Once you internalize the pattern, it simplifies the burden of managing
    state
    

    View Slide

29. Reference Materials
    Official Angular Documentation
    https://angular.io
    Build Enterprise Applications with Angular 2 (and Angular 4) – Mosh Hamedani
    https://www.udemy.com/angular2-advanced
    Using Redux to Manage State in Angular - Hendrik Swanepoel
    https://app.pluralsight.com/library/courses/angular-2-redux-manage-state
    Advanced Redux - Daniel Stern
    https://app.pluralsight.com/library/courses/advanced-redux
    Building a Redux application with Angular 2 – Parts 1 and 2 - Hristo Georgiev
    https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1
    https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2
    ng-book – The Complete Book on Angular 4 – Nathan Murray and Ari Lerner
    Angular Redux Demo code
    https://github.com/dougcorbett/angular-redux-demo
    

    View Slide