This article will present uses of Typescript Tuples for developers using React and Angular.
A Tuple is an array with special properties and considerations:
Consider the following tuples:
Applications often (a) need to share or reuse data and (b) have many events to change data. State management allows us to centralize data changes and control the insanity.
Developers often approach state management with reluctance, fear, and a naive understanding of when and how to use it.
State management is important when data:
Dependency injection is a solution in which a system supplies a target 1..n dependencies from external sources; rather than requiring the target to create those dependencies itself. Dependencies are services, objects, functions, or values that a class (or factory, function) needs to perform its function.
Most developers think DI is only useful for testing with mocks, spys, and stubs. The true value of DI, however, is its ability to decouple origination (configuration, construction, and caching) from destination usages.
Consider the following coupling of components:
Use React Hooks with RxJS + State Management to create push-based architectures and radically clean-up your view components.
Early this year, I published a blog article on Push-based Architectures for Angular applications. In that earlier post, I provided code solutions for Angular developers. And I recorded a YouTube video of a panel discussion and presentation of those concepts in Push-based Architectures with RxJS.
Now with React v16.8 and Hooks, we can build equally elegant, performant push-based solutions with React. In this post, I provide similar mind-blowing ideas and code solutions for React developers!
… all this time you have been coding wrong!
Before I can show you HOW to implement Push-Based architectures, I need to first describe WHY Pull-Based solutions are flawed… and WHY Push-Based systems are better.
Most developers learn to program, code, and build software architectures using traditional Pull-based approaches. In the world of web applications and asynchronous, rich user experiences this approach is flawed, rampant with myriad problems, and is fundamentally wrong.
With Pull-based architecture, the views will explicitly call service methods to force-reload (aka ‘pull’) the data. This is the traditional approach employed by most developers.
You may not need to use NgRx or NgXs in your application. But you should use Facades + RxJS in your application! Let’s explore why, where, and how…
As part of my professional focus, I invest 10% of time training Angular developers around the world. And in every workshop, I tell the attending developers the following three (3) axioms:
Prior to Nx 6.2, Nx already provided scalable state management with NgRx.
Now there is a new option when generating NgRx files to also generate a facade on top of your state management… to help you work even better at-scale.
Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.
When writing a lot of NgRx code — as many enterprises do — developers quickly accumulate large collections of actions and selectors classes. These classes are used to [respectively] dispatch requests to- and query from- the NgRx Store.