Reactive Programming with Angular and ngrx Learn to Harness the Power of Reactive Programming with RxJS and ngrx Extensions — Oren Farhi Reactive Programming with Angular and ngrx Learn to Harness the Power of Reactive Programming with RxJS and ngrx Extensions Oren Farhi Reactive Programming with Angular and ngrx: Learn to Harness the Power of Reactive Programming with RxJS and ngrx Extensions Oren Farhi Lod, Israel ISBN-13 (pbk): 978-1-4842-2619-3 ISBN-13 (electronic): 978-1-4842-2620-9 DOI 10.1007/978-1-4842-2620-9 Library of Congress Control Number: 2017941328 Copyright © 2017 by Oren Farhi This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director: Welmoed Spahr Editorial Director: Todd Green Acquisitions Editor: Louise Corrigan Development Editor: James Markham Technical Reviewer: Luca Mezzalira Coordinating Editor: Nancy Chen Copy Editor: April Rondeau Artist: SPi Global Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc. (SSBM Finance Inc.). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit http://www.apress.com/rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484226193. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper This book is dedicated to the love of my life, Adi, for always supporting me and allowing me to move forward; to my lovely kids, I hope this will inspire you in your ways; to my mother and father for loving me unconditionally; and to my entire supportive family. Contents at a Glance About the Author ����������������������������������������������������������������������������xiii About the Technical Reviewer ���������������������������������������������������������xv Introduction �����������������������������������������������������������������������������������xvii ■ Chapter 1: Getting Started with the Echoes Player Lite App ����������1 ■ Chapter 2: Getting Familiar with Boilerplate for Development �����13 ■ Chapter 3: Adding State Management with ngrx/store ����������������31 ■ Chapter 4: Creating Reactive Components: Presentational and Container ��������������������������������������������������������51 ■ Chapter 5: Understanding Services with Reactive Programming ����73 ■ Chapter 6: Managing Side Effects with ngrx/effects ��������������������99 ■ Chapter 7: Reactive Forms and Common Solutions �������������������123 Index ����������������������������������������������������������������������������������������������145 v Contents About the Author ����������������������������������������������������������������������������xiii About the Technical Reviewer ���������������������������������������������������������xv Introduction �����������������������������������������������������������������������������������xvii ■ Chapter 1: Getting Started with the Echoes Player Lite App ����������1 Browser and Development Environment �������������������������������������������������1 Augury Dev Tools Extension ��������������������������������������������������������������������������������������1 Version Control and Deployment ������������������������������������������������������������������������������3 Setting the Development Environment ���������������������������������������������������������������������3 Terminal/Command Line �������������������������������������������������������������������������������������������3 Editor (IDE or Code Editor) ����������������������������������������������������������������������������������������4 Application Structure �������������������������������������������������������������������������������4 RxJS and ngrx: Reactive Extensions for Angular �������������������������������������6 RxJS��������������������������������������������������������������������������������������������������������������������������6 ngrx: Reactive Extensions for Angular ����������������������������������������������������������������������7 The Sample Application ���������������������������������������������������������������������������9 Summary �����������������������������������������������������������������������������������������������11 ■ Chapter 2: Getting Familiar with Boilerplate for Development �����13 Boilerplate Overview �����������������������������������������������������������������������������13 The “config” directory ��������������������������������������������������������������������������������������������14 Karma ���������������������������������������������������������������������������������������������������������������������15 vii ■ Contents Webpack ������������������������������������������������������������������������������������������������17 Webpack Common Settings ������������������������������������������������������������������������������������17 Customized Settings �����������������������������������������������������������������������������������������������20 Third-Party Libraries �����������������������������������������������������������������������������22 Vendor Libraries (vendor�browser�ts) ����������������������������������������������������������������������22 Polyfills (polyfills�browser�ts) ����������������������������������������������������������������������������������22 The App Directory ����������������������������������������������������������������������������������23 App Component ������������������������������������������������������������������������������������������������������23 Core Directory ���������������������������������������������������������������������������������������������������������23 Running the Project �������������������������������������������������������������������������������27 Alternative Boilerplates �������������������������������������������������������������������������28 The Official Angular CLI Tool �����������������������������������������������������������������������������������28 Summary �����������������������������������������������������������������������������������������������29 ■ Chapter 3: Adding State Management with ngrx/store ����������������31 Benefits of Store as State Management ������������������������������������������������31 One Place for State �������������������������������������������������������������������������������������������������31 Performance �����������������������������������������������������������������������������������������������������������32 Testability ���������������������������������������������������������������������������������������������������������������32 Devtools ������������������������������������������������������������������������������������������������������������������32 Redux Primer �����������������������������������������������������������������������������������������32 Flux �������������������������������������������������������������������������������������������������������������������������32 Redux in Action �������������������������������������������������������������������������������������������������������33 Reduce and Flux for Redux �������������������������������������������������������������������������������������34 ngrx/store ����������������������������������������������������������������������������������������������34 Core Concepts ��������������������������������������������������������������������������������������������������������35 Store �����������������������������������������������������������������������������������������������������������������������35 Reducers ����������������������������������������������������������������������������������������������������������������37 Action����������������������������������������������������������������������������������������������������������������������38 viii ■ Contents Adding ngrx/store ����������������������������������������������������������������������������������39 Installing NPM Packages ����������������������������������������������������������������������������������������39 Defining the Main Store Module �����������������������������������������������������������������������������39 Creating a YouTube Videos Reducer �����������������������������������������������������������������������41 Connecting Reducer to the Store ����������������������������������������������������������������������������45 Connecting Reducer to a Component ���������������������������������������������������������������������46 Summary �����������������������������������������������������������������������������������������������49 ■ Chapter 4: Creating Reactive Components: Presentational and Container �������������������������������������������������������������������������������51 Introduction to Components ������������������������������������������������������������������52 HTML Components �������������������������������������������������������������������������������������������������53 Container / Smart Component ���������������������������������������������������������������54 Fetching Data ���������������������������������������������������������������������������������������������������������54 Composition of Other Components �������������������������������������������������������������������������55 Stateful Component ������������������������������������������������������������������������������������������������56 Handle Internal Component’s Events and Async Operations ����������������������������������57 now-playing Container Component ������������������������������������������������������������������������59 Presentational / Dumb Component �������������������������������������������������������63 @Input() as Data Provider ���������������������������������������������������������������������������������������63 Emit Events with @Output() ������������������������������������������������������������������������������������65 No Dependencies on the Rest of the App ���������������������������������������������������������������66 ngrx/store and Change-Detection Strategy �������������������������������������������67 Creating now-playlist-filter Presentational Component ������������������������68 Dependencies ���������������������������������������������������������������������������������������������������������68 Change-Detection Mode—OnPush �������������������������������������������������������������������������68 Defining @Input & @Output �����������������������������������������������������������������������������������69 View Components with Augury �������������������������������������������������������������70 Inspecting Component ��������������������������������������������������������������������������������������������71 Summary �����������������������������������������������������������������������������������������������71 ix ■ Contents ■ Chapter 5: Understanding Services with Reactive Programming ��������������������������������������������������������������������������������73 Diving into the Search Service ��������������������������������������������������������������74 YouTube Search Service �����������������������������������������������������������������������������������������75 YouTube API Factory �����������������������������������������������������������������������������������������������78 YouTube Video Info Service �������������������������������������������������������������������������������������79 Integrating Search and Video Data �������������������������������������������������������������������������81 Fine-Tune—Pipes & View ���������������������������������������������������������������������������������������82 Adding a Player �������������������������������������������������������������������������������������88 Creating the Main Player Service ���������������������������������������������������������������������������88 The Player Component ��������������������������������������������������������������������������������������������91 Connecting Player View Components ���������������������������������������������������������������������92 BDD for Services �����������������������������������������������������������������������������������94 Test Setup ���������������������������������������������������������������������������������������������������������������94 Starting a Test Suite �����������������������������������������������������������������������������������������������94 Summary �����������������������������������������������������������������������������������������������98 ■ Chapter 6: Managing Side Effects with ngrx/effects ��������������������99 Introduction to ngrx/effects �������������������������������������������������������������������99 @Effect() Decorator ������������������������������������������������������������������������������������������������99 Setting Up and Connecting ngrx/effects ���������������������������������������������������������������101 Creating the First Effect ����������������������������������������������������������������������������������������101 Extracting Logic from youtube-videos Component to Effect ����������������������������������102 Updates in youtube-videos Component ����������������������������������������������������������������103 Constructing Side Effects to Actions ���������������������������������������������������103 Side Effect: Reset Videos Array �����������������������������������������������������������������������������104 Side Effect: Search with YouTube Search Service ������������������������������������������������104 Side Effect: Fetching Metadata and Adding the Videos ����������������������������������������105 Side Effect: The Search More Feature ������������������������������������������������������������������106 x ■ Contents Retrieving Data from Store inside an Effect ����������������������������������������108 Reducer Refactoring ���������������������������������������������������������������������������������������������108 Updating Tests for Reducer�����������������������������������������������������������������������������������110 Updating Tests for YouTube Search Service ����������������������������������������������������������112 Adding the Store to an Effect’s Stream ����������������������������������������������������������������112 Transforming Non-Observables to Observables ����������������������������������113 Testing Effects �������������������������������������������������������������������������������������115 Required Imports ��������������������������������������������������������������������������������������������������115 Test Environment Setup for Effects ����������������������������������������������������������������������116 Creating Test Cases for Effects �����������������������������������������������������������������������������117 Simple Test for an Effect ���������������������������������������������������������������������������������������117 Testing an Effect with a Spy ���������������������������������������������������������������������������������118 Testing Effect with Action Creator ������������������������������������������������������������������������118 Testing Effects with Store and Observables ���������������������������������������������������������119 More API Features of ngrx/effects �������������������������������������������������������120 Merging Effects with mergeEffects ����������������������������������������������������������������������120 Summary ���������������������������������������������������������������������������������������������122 ■ Chapter 7: Reactive Forms and Common Solutions �������������������123 Looking Closely at Reactive Forms �����������������������������������������������������123 Switching to Reactive Forms ��������������������������������������������������������������������������������123 Creating a Reactive Search Form �������������������������������������������������������������������������124 Using FormBuilder to Create a Reactive Form������������������������������������������������������124 Enhancing the Form with New Features ���������������������������������������������126 Adding Presets Form Control ��������������������������������������������������������������������������������126 React to Form Changes ����������������������������������������������������������������������������������������127 Updating Side Effects �������������������������������������������������������������������������������������������130 Trigger Search When Preset Is Changed���������������������������������������������������������������130 xi
Description: