Cover image for Architecting Angular Applications with Redux, RxJS, and NgRx

Architecting Angular Applications with Redux, RxJS, and NgRx

Author Christoffer Noring
Release Date: 2018/03/01
ISBN: 9781787122406
Topic:
0%
291
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Manage state in Angular to write high performing web apps by combining the power of Flux, RxJS, and NgRx

About This Book

  • Learn what makes an excellent Angular application architecture
  • Use Redux to write performant, consistent Angular applications
  • Incorporate Reactive Programming principles and RxJS to make it easier to develop, test, and debug your Angular applications

Who This Book Is For

If you have been developing Angular applications and want to dive deeper into the Angular architecture with Redux, RxJS, and NgRx to write robust web apps, then this book is for you.

What You Will Learn

  • Understand the one-way data flow and Flux pattern
  • Work with functional programming and asynchronous data streams
  • Figure out how RxJS can help us address the flaws in promises
  • Set up different versions of cascading calls
  • Explore advanced operators
  • Get familiar with the Redux pattern and its principles
  • Test and debug different features of your application
  • Build your own lightweight app using Flux, Redux, and NgRx

In Detail

Managing the state of large-scale web applications is a highly challenging task with the need to align different components, backends, and web workers harmoniously. When it comes to Angular, you can use NgRx, which combines the simplicity of Redux with the reactive programming power of RxJS to build your application architecture, making your code elegant and easy to reason about, debug, and test.

In this book, we start by looking at the different ways of architecting Angular applications and some of the patterns that are involved in it. This will be followed by a discussion on one-way data flow, the Flux pattern, and the origin of Redux.

The book introduces you to declarative programming or, more precisely, functional programming and talks about its advantages. We then move on to the reactive programming paradigm. Reactive programming is a concept heavily used in Angular and is at the core of NgRx. Later, we look at RxJS, as a library and master it. We thoroughly describe how Redux works and how to implement it from scratch. The two last chapters of the book cover everything NgRx has to offer in terms of core functionality and supporting libraries, including how to build a micro implementation of NgRx.

This book will empower you to not only use Redux and NgRx to the fullest, but also feel confident in building your own version, should you need it.

Style and approach

This book covers everything there is to know to get well-acquainted with Angular without bogging you down. Everything is neatly laid out under clear headings for quick consultation, giving you the information required to understand a concept immediately.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Architecting Angular Applications with Redux, RxJS, and NgRx
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Foreword
  5. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  7. Quick Look Back at Data Services for Simple Apps
    1. Model-View-Controller – the pattern we all know
      1. Cohesion and coupling – establishing a common language
      2. Explaining the components of MVC
        1. The model
        2. The view
        3. The controller
      3. Interactions – the behavior between the components
      4. MVC summary
    2. An MVC flow in Angular
      1. The model
      2. The component – a controller and a building block
        1. First responder to a route
        2. Used as a building block
        3. Components from an architectural standpoint
      3. NgModule – our new facade (and some other bits)
    3. Using ES2015 modules
      1. Consuming a module
        1. An Angular example
        2. Multiple exports
        3. The default import/export
        4. Renaming imports
      2. The service
        1. Service without dependencies
        2. Service with dependencies
    4. Dependency Injection
      1. Dependency Injection in Angular using providers
      2. Overriding an existing construct
        1. Overriding at runtime
        2. Overriding constants
        3. Resolving your dependencies with @Injectable
    5. Fetching and persisting data with HTTP – introducing services with Observables
      1. Fetching data with the HTTP service
    6. Summary
  8. 1.21 Gigawatt – Flux Pattern Explained
    1. Core concepts overview
    2. A uniform data flow
      1. Action – capture the intent
      2. Dispatcher – the spider in the web
        1. Listening to the dispatcher
      3. The store – managing state, data retrieval, and callbacks
      4. The view
    3. Demoing a uniform data flow
      1. Creating a selection view
      2. Adding the dispatcher
      3. Adding the store
      4. Adding a selected view
      5. Running the demo
    4. Adding more actions to our flow
      1. Cleaning up the view
      2. Cleaning up the store
        1. Adding EventEmitter
        2. Adding to and cleaning up the register method
      3. Further improvements
        1. Adding immutability
        2. Summarizing
    5. Adding AJAX calls
    6. An even bigger solution
    7. Summary
  9. Asynchronous Programming
    1. The callback pattern
      1. The callback pattern on the web
      2. The callback pattern in Node.js
    2. Problems with structuring async code – callback hell
    3. Promises
      1. Thenables
        1. Handling rejected promises
      2. Chaining – dealing with several promises
    4. Asynchronous libraries
      1. Async library
        1. async.map()
        2. async.parallel()
        3. async.series()
    5. Async/await
    6. Summary
  10. Functional Reactive Programming
    1. Functional programming versus imperative programming
      1. Imperative programming versus declarative programming
      2. First-class higher-order functions
      3. Pure functions
    2. Recursion
      1. No more loops
      2. Reoccurring pattern
        1. Summarise
        2. Count
        3. Width
    3. Asynchronous data streams
    4. Comparing lists to async streams – preparing for RxJS
      1. Combining the functional programming paradigm with streams
        1. Projection
        2. Filtering
        3. Combining mindsets
    5. Summary
  11. RxJS Basics
    1. Observer pattern
    2. RxJS core concepts
      1. Observable and Observer
      2. Producer
      3. Observable error and completion
      4. Operator
    3. Creating Observables
      1. Creation operators
        1. of()
        2. interval()
        3. from()
        4. fromEvent()
        5. bindCallback()
    4. Cleanup
      1. Subscriptions
    5. Creating a core implementation of RxJS
      1. Implementing create()
      2. Handling subscriptions
      3. Adding operators
      4. Revisiting the basics, adding errors, and complete
    6. Summary
  12. Manipulating Streams and Their Values
    1. Starting out
      1. Understanding operators
    2. Stream in a stream
    3. AJAX
      1. fetch()
      2. ajax() operator
      3. Cascading calls
    4. A deeper look
      1. Creation operators
        1. of() operator
        2. from() operator
        3. range() operator
        4. fromEvent() operator
      2. Combination
        1. merge() operator
        2. combineLatest()
        3. zip()
        4. concat()
      3. Mathematical
        1. max
        2. min
        3. sum
      4. Time
        1. interval() operator
        2. timer() operator
        3. delay() operator
        4. sampleTime() operator
        5. debounceTime() operator
      5. Grouping
        1. buffer() operator
        2. bufferTime() operator
    5. Thinking in streams
    6. Summary
  13. RxJS Advanced
    1. Hot, cold, and warm Observables
      1. Making a stream hot
      2. Warm streams
    2. Subjects
      1. Using Subject for cascading lists
      2. BehaviorSubject
      3. ReplaySubject
      4. AsyncSubject
    3. Error handling
      1. Catch and continue
      2. Ignoring the error 
      3. Retry
      4. Advanced Retry
    4. Marble testing
      1. Set up
      2. Writing your first marble test
      3. Fleshing out with more tests
    5. Pipeable operators
      1. Creating reusable operators with let()
      2. Shifting to pipeable operators
    6. Summary
  14. Redux
    1. Principles
      1. Single source of truth
      2. Read-only states
      3. Changing states with pure functions
    2. Core concepts
      1. Immutability patterns
        1. Changing a list
        2. Changing an object
      2. Using reducers
        1. Merging all reducers together
    3. Data flow
      1. Creating the action
      2. Creating a controller class – create-view.js
      3. Creating a store implementation
        1. Testing out our store
        2. Cleaning up the implementation
      4. Creating our second controller class – list-view.js
        1. Adding subscription capability to our store
      5. Creating a program
        1. Setting up our environment
        2. Creating the missing files and running our program
    4. Dealing with asynchronous calls
      1. Creating a demo with Redux and asynchronous
    5. Best practices
    6. Summary
  15. NgRx – Reduxing that Angular App
    1. NgRx overview
      1. A word on state management
    2. @ngrx/store – state management
      1. A more complex example – a list
    3. Best practices
      1. A cleanup example
        1. Create a dedicated directory and feature module
        2. Add reducer and constants
        3. Moving the component to our jedi directory
        4. Registering our reducer with the store
    4. Leveraging types and feature modules
      1. Going from forRoot() to forFeature()
        1. Setting up forFeature() from string to selection function
      2. Introducing NgRx types for setting up the state
        1. Giving forFeature() a type
      3. Several states in the same feature module
        1. Adding the counter-list reducer
        2. Adding the component
        3. Adding the constants
        4. Adding the action methods
        5. Adding the model
        6. Register our reducers
    5. Component architecture
    6. @ngrx/store-devtools – debugging
    7. @ngrx/effects – working with side effects
      1. Installing and setting it up 
      2. Creating our first effect – a realistic scenario
        1. Creating our constants
        2. Action creators
        3. Reducer with a new type of default state
        4. The effect – listening to a specific dispatched action
        5. Adding a component – introducing selectors
      3. Extending our example with the create effect
        1. Updating the constants file
        2. Updating the reducer
        3. Additional actions 
        4. Adding another effect
        5. Supporting the effect in our component
        6. Running a demo of the app
    8. Summary
  16. NgRx – In Depth
    1. @ngrx/entity
      1. Setting it up
      2. Selecting our data
      3. Adding the full CRUD
        1. Creating users
        2. Updating users
        3. Deleting users
    2. @ngrx/router-store
      1. Installation and set up
      2. Investigating the router state
        1. Custom serialization
      3. Navigating through dispatch
    3. Understanding NgRx – building our own micro implementation
      1. Adding a store
        1. Merging the states in a better way
      2. Implementing a reducer and integrating it with the store
      3. Dealing with slices of state
      4. Handling side effects
    4. @ngrx/schematics
      1. Setting it up
      2. Generating constructs
        1. Generating actions
        2. Generating a container
        3. Generating an effect
        4. Generating an entity
        5. Generating a feature
        6. Generating a reducer
        7. Generating a store
    5. Summary
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think
52.15.59.163