This article will present uses of Typescript Tuples for developers using React and Angular.

A Tuple is an array with special properties and considerations:

  • The number of elements of the array is fixed (aka immutable).
  • The type of the elements of the array need not be the same.
  • The type of each elements is known.

Consider the following tuples:

State Management

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.

Harry Beckwith and Thomas Burleson decided to write this tutorial to demonstrate real-world, best-practices when using state management in React.

State management is important when data:

  1. Must be shared between components,
  2. Must be accessible independent of view instances, and
  3. Changes to the data should be centralized
  4. Changes notifications should performantly update views

Redux Pattern

Using state machines is magical when combined with React custom hooks. Recently Dave Geddski wrote about why state machines are fantastic and how to use them in: State Machines in React.

Dependency Injection (DI) is a system process found in many software frameworks: Spring, Flex, Swiz, Angular.

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.

Traditional Scenario

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.

Traditional Pull-Based Solutions

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.

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform Thanks for being part of indepth movement!

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:

  • RxJS is the most important ‘thing’ to master in your career
  • NgRx is the most difficult ‘thing’ to…

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.

Thomas Burleson

Solutions architect expert in NextJS, React, NextJS and Angular solutions. Formerly a Principal Architect @, Team Lead for Angular, Google.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store