Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Managing State In Angular with Redux

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.

E710a7268891ac8c9c13756fcd28fa5f?s=128

Doug Corbett

January 11, 2018
Tweet

Transcript

  1. Managing State In Angular with Redux Thursday January 11, 2018

    Doug Corbett dougccorbett@gmail.com
  2. Basic State Management in Angular 1 Anatomy of a Redux

    Implementation 3 Final Thoughts 4 Basic Redux Ideas 2 Agenda
  3. on Basic State Management in Angular

  4. Component State (DOM) Parent Component Child Component Grandchild Component (Property

    binding) (Event binding) * Reactive Forms
  5. Demo

  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
  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
  8. Demo

  9. Redux • Data Architecture Pattern • Characteristics • Centralized State

    Management • Immutability • Pub/Sub communication between State Store and listening components
  10. on Basic Redux Ideas

  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
  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.
  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
  14. Pub/Sub Communication • Loose coupling • Efficient communication between dispatchers

    and subscribers
  15. on Anatomy of a Redux Implementation

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

    Action
  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<Product>, cart: Array<Product> }
  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 } }
  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<AppState> = (state: AppState = initialState, action: Action): AppState => { switch(action.type) { case ‘ADD_PRODUCT_TO_CART’: return { Object.assign({}, state, { cart: state.cart.concat( (<AddProductAction>action).product; ) } } default: return state; } }
  20. Redux Elements • Action • Reducer • State • Store

    • Component Reducer Action Component Action (string) Data (object) Store State
  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);
  22. Store • Object responsible for persisting and changing state. //

    app.store.ts let store: Store<AppState> == createStore<AppState>(cartReducer); export const AppStore = new InjectionToken(‘App.store’); const devtools: StoreEnhancer<AppState> = window[‘devToolsExtension’] ? window[‘devToolsExtension’]() : f => f; … export createAppStore(): Store<AppState> { return createStore<AppState>( reducer, compose(devtools) ); } export const appStoreProviders = [ { provide: AppStore, useFactory: createAppStore } ];
  23. Redux Elements • Action • Reducer • State • Store

    • Component • Action Creator • Observer Reducer Component Store State Action Creator Action Action (string) Data (object) Observer
  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<Action> = (product) => ( { type: ADD_PRODUCT_TO_CART, product: product } );
  25. Observers • Any component that subscribes to state changes constructor(@Inject(AppStore)

    private store: Store<AppState>) { store.subscribe(() => this.updateState()); this.updateState(); } updateState() { // getUnreadMessagesCount is a selector function this.unreadMessagesCount = getUnreadMessagesCount(this.store.getState()); }
  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.
  27. Final Thoughts

  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
  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