Architecting Angular Applications with Redux，RxJS，and NgRx

Other Books You May Enjoy

Summary

Generating a store

Generating a reducer

Generating a feature

Generating an entity

Generating an effect

Generating a container

Generating actions

Generating constructs

Setting it up

@ngrx/schematics

Handling side effects

Dealing with slices of state

Implementing a reducer and integrating it with the store

Merging the states in a better way

Adding a store

Understanding NgRx – building our own micro implementation

Navigating through dispatch

Custom serialization

Investigating the router state

Installation and set up

@ngrx/router-store

Deleting users

Updating users

Creating users

Adding the full CRUD

Selecting our data

Setting it up

@ngrx/entity

NgRx – In Depth

Summary

Running a demo of the app

Supporting the effect in our component

Adding another effect

Additional actions

Updating the reducer

Updating the constants file

Extending our example with the create effect

Adding a component – introducing selectors

The effect – listening to a specific dispatched action

Reducer with a new type of default state

Action creators

Creating our constants

Creating our first effect – a realistic scenario

Installing and setting it up

@ngrx/effects – working with side effects

@ngrx/store-devtools – debugging

Component architecture

Register our reducers

Adding the model

Adding the action methods

Adding the constants

Adding the component

Adding the counter-list reducer

Several states in the same feature module

Giving forFeature() a type

Introducing NgRx types for setting up the state

Setting up forFeature() from string to selection function

Going from forRoot() to forFeature()

Leveraging types and feature modules

Registering our reducer with the store

Moving the component to our jedi directory

Add reducer and constants

Create a dedicated directory and feature module

A cleanup example

Best practices

A more complex example – a list

@ngrx/store – state management

A word on state management

NgRx overview

NgRx – Reduxing that Angular App

Summary

Best practices

Creating a demo with Redux and asynchronous

Dealing with asynchronous calls

Creating the missing files and running our program

Setting up our environment

Creating a program

Adding subscription capability to our store

Creating our second controller class – list-view.js

Cleaning up the implementation

Testing out our store

Creating a store implementation

Creating a controller class – create-view.js

Creating the action

Data flow

Merging all reducers together

Using reducers

Changing an object

Changing a list

Immutability patterns

Core concepts

Changing states with pure functions

Read-only states

Single source of truth

Principles

Redux

Summary

Shifting to pipeable operators

Creating reusable operators with let()

Pipeable operators

Fleshing out with more tests

Writing your first marble test

Set up

Marble testing

Advanced Retry

Retry

Ignoring the error

Catch and continue

Error handling

AsyncSubject

ReplaySubject

BehaviorSubject

Using Subject for cascading lists

Subjects

Warm streams

Making a stream hot

Hot cold and warm Observables

RxJS Advanced

Summary

Thinking in streams

bufferTime() operator

buffer() operator

Grouping

debounceTime() operator

sampleTime() operator

delay() operator

timer() operator

interval() operator

Time

sum

min

max

Mathematical

concat()

zip()

combineLatest()

merge() operator

Combination

fromEvent() operator

range() operator

from() operator

of() operator

Creation operators

A deeper look

Cascading calls

ajax() operator

fetch()

AJAX

Stream in a stream

Understanding operators

Starting out

Manipulating Streams and Their Values

Summary

Revisiting the basics adding errors and complete

Adding operators

Handling subscriptions

Implementing create()

Creating a core implementation of RxJS

Subscriptions

Cleanup

bindCallback()

fromEvent()

from()

interval()

of()

Creation operators

Creating Observables

Operator

Observable error and completion

Producer

Observable and Observer

RxJS core concepts

Observer pattern

RxJS Basics

Summary

Combining mindsets

Filtering

Projection

Combining the functional programming paradigm with streams

Comparing lists to async streams – preparing for RxJS

Asynchronous data streams

Width

Count

Summarise

Reoccurring pattern

No more loops

Recursion

Pure functions

First-class higher-order functions

Imperative programming versus declarative programming

Functional programming versus imperative programming

Functional Reactive Programming

Summary

Async/await

async.series()

async.parallel()

async.map()

Async library

Asynchronous libraries

Chaining – dealing with several promises

Handling rejected promises

Thenables

Promises

Problems with structuring async code – callback hell

The callback pattern in Node.js

The callback pattern on the web

The callback pattern

Asynchronous Programming

Summary

An even bigger solution

Adding AJAX calls

Summarizing

Adding immutability

Further improvements

Adding to and cleaning up the register method

Adding EventEmitter

Cleaning up the store

Cleaning up the view

Adding more actions to our flow

Running the demo

Adding a selected view

Adding the store

Adding the dispatcher

Creating a selection view

Demoing a uniform data flow

The view

The store – managing state data retrieval and callbacks

Listening to the dispatcher

Dispatcher – the spider in the web

Action – capture the intent

A uniform data flow

Core concepts overview

1.21 Gigawatt – Flux Pattern Explained

Summary

Fetching data with the HTTP service

Fetching and persisting data with HTTP – introducing services with Observables

Resolving your dependencies with @Injectable

Overriding constants

Overriding at runtime

Overriding an existing construct

Dependency Injection in Angular using providers

Dependency Injection

Service with dependencies

Service without dependencies

The service

Renaming imports

The default import/export

Multiple exports

An Angular example

Consuming a module

Using ES2015 modules

NgModule – our new facade (and some other bits)

Components from an architectural standpoint

Used as a building block

First responder to a route

The component – a controller and a building block

The model

An MVC flow in Angular

MVC summary

Interactions – the behavior between the components

The controller

The view

The model

Explaining the components of MVC

Cohesion and coupling – establishing a common language

Model-View-Controller – the pattern we all know

Quick Look Back at Data Services for Simple Apps

Reviews

Get in touch

Conventions used

Download the example code files

To get the most out of this book

What this book covers

Who this book is for

Preface

Packt is searching for authors like you

About the reviewers

About the author

Contributors

Foreword

PacktPub.com

Why subscribe?

Packt Upsell

Architecting Angular Applications with Redux RxJS and NgRx

Copyright and Credits

Title Page

封面

封面

Title Page

Copyright and Credits

Architecting Angular Applications with Redux RxJS and NgRx

Packt Upsell

Why subscribe?

PacktPub.com

Foreword

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Reviews

Quick Look Back at Data Services for Simple Apps

Model-View-Controller – the pattern we all know

Cohesion and coupling – establishing a common language

Explaining the components of MVC

The model

The view

The controller

Interactions – the behavior between the components

MVC summary

An MVC flow in Angular

The model

The component – a controller and a building block

First responder to a route

Used as a building block

Components from an architectural standpoint

NgModule – our new facade (and some other bits)

Using ES2015 modules

Consuming a module

An Angular example

Multiple exports

The default import/export

Renaming imports

The service

Service without dependencies

Service with dependencies

Dependency Injection

Dependency Injection in Angular using providers

Overriding an existing construct

Overriding at runtime

Overriding constants

Resolving your dependencies with @Injectable

Fetching and persisting data with HTTP – introducing services with Observables

Fetching data with the HTTP service

Summary

1.21 Gigawatt – Flux Pattern Explained

Core concepts overview

A uniform data flow

Action – capture the intent

Dispatcher – the spider in the web

Listening to the dispatcher

The store – managing state data retrieval and callbacks

The view

Demoing a uniform data flow

Creating a selection view

Adding the dispatcher

Adding the store

Adding a selected view

Running the demo

Adding more actions to our flow

Cleaning up the view

Cleaning up the store

Adding EventEmitter

Adding to and cleaning up the register method

Further improvements

Adding immutability

Summarizing

Adding AJAX calls

An even bigger solution

Summary

Asynchronous Programming

The callback pattern

The callback pattern on the web

The callback pattern in Node.js

Problems with structuring async code – callback hell

Promises

Thenables

Handling rejected promises

Chaining – dealing with several promises

Asynchronous libraries

Async library

async.map()

async.parallel()

async.series()

Async/await

Summary

Functional Reactive Programming

Functional programming versus imperative programming

Imperative programming versus declarative programming

First-class higher-order functions

Pure functions

Recursion

No more loops

Reoccurring pattern

Summarise

Count

Width

Asynchronous data streams

Comparing lists to async streams – preparing for RxJS

Combining the functional programming paradigm with streams

Projection

Filtering

Combining mindsets

Summary

RxJS Basics

Observer pattern

RxJS core concepts

Observable and Observer

Producer

Observable error and completion

Operator

Creating Observables

Creation operators

of()

interval()

from()

fromEvent()

bindCallback()

Cleanup

Subscriptions

Creating a core implementation of RxJS

Implementing create()

Handling subscriptions

Adding operators

Revisiting the basics adding errors and complete

Summary

Manipulating Streams and Their Values

Starting out

Understanding operators

Stream in a stream

AJAX

fetch()

ajax() operator

Cascading calls

A deeper look

Creation operators

of() operator

from() operator

range() operator

fromEvent() operator

Combination

merge() operator

combineLatest()

zip()

concat()

Mathematical

max

min

sum

Time

interval() operator

timer() operator

delay() operator

sampleTime() operator

debounceTime() operator

Grouping

buffer() operator

bufferTime() operator

Thinking in streams

Summary

RxJS Advanced

Hot cold and warm Observables

Making a stream hot

Warm streams

Subjects

Using Subject for cascading lists

BehaviorSubject

ReplaySubject

AsyncSubject

Error handling

Catch and continue

Ignoring the error

Retry

Advanced Retry

Marble testing

Set up

Writing your first marble test

Fleshing out with more tests

Pipeable operators

Creating reusable operators with let()

Shifting to pipeable operators

Summary

Redux

Principles

Single source of truth

Read-only states

Changing states with pure functions

Core concepts

Immutability patterns

Changing a list

Changing an object

Using reducers

Merging all reducers together

Data flow

Creating the action

Creating a controller class – create-view.js

Creating a store implementation

Testing out our store

Cleaning up the implementation

Creating our second controller class – list-view.js

Adding subscription capability to our store

Creating a program

Setting up our environment

Creating the missing files and running our program

Dealing with asynchronous calls

Creating a demo with Redux and asynchronous

Best practices

Summary

NgRx – Reduxing that Angular App

NgRx overview

A word on state management

@ngrx/store – state management

A more complex example – a list

Best practices

A cleanup example

Create a dedicated directory and feature module

Add reducer and constants

Moving the component to our jedi directory

Registering our reducer with the store

Leveraging types and feature modules

Going from forRoot() to forFeature()

Setting up forFeature() from string to selection function

Introducing NgRx types for setting up the state

Giving forFeature() a type

Several states in the same feature module

Adding the counter-list reducer

Adding the component

Adding the constants

Adding the action methods

Adding the model

Register our reducers

Component architecture

@ngrx/store-devtools – debugging

@ngrx/effects – working with side effects

Installing and setting it up

Creating our first effect – a realistic scenario

Creating our constants

Action creators

Reducer with a new type of default state

The effect – listening to a specific dispatched action

Adding a component – introducing selectors

Extending our example with the create effect

Updating the constants file

Updating the reducer

Additional actions

Adding another effect

Supporting the effect in our component

Running a demo of the app

Summary

NgRx – In Depth

@ngrx/entity

Setting it up

Selecting our data

Adding the full CRUD

Creating users

Updating users

Deleting users

@ngrx/router-store

Installation and set up

Investigating the router state

Custom serialization

Navigating through dispatch

Understanding NgRx – building our own micro implementation

Adding a store

Merging the states in a better way

Implementing a reducer and integrating it with the store

Dealing with slices of state

Handling side effects

@ngrx/schematics

Setting it up

Generating constructs

Generating actions

Generating a container

Generating an effect

Generating an entity

Generating a feature

Generating a reducer

Generating a store

Summary

Other Books You May Enjoy