State: Route query initial state is null

[escapemanuele]

Changes proposed in this Pull Request

Regarding #57500 (comment), read the comments if you want to know about this approach more in detail.

This PR researches the possibility of using null as the initial state of route query (initial, previous and current fields). The use of null could be a great way of describing “empty” (as knowingly empty) across all the state tree, bringing greater uniformity to the whole app.

The route query state is “truly unknown” during Calypso boot, before ROUTE_SET action is dispatched, and so the truly semantically correct starting value should be undefined. But there are problems between undefined and Redux, and it's only for a brief moment during boot, so we could go directly with null.

I introduced a “raw” selector (getRouteQueryCurrent in client/state/route/query/selectors.js) that simply reflects the state tree, and moved the logic for managing “null values“ up in the access layer (getCurrentQueryArguments in client/state/selectors/get-current-query-arguments.js).
The consumer (our components) then access data through the API, in our case the selector (getCurrentQueryArguments), that now acts like an _access layer over data, whose structure is obscured to the consumer.

There is now a clearer distinction between the access layer, with all the business logic to guard against null values, and the data structure, that can be uniform in the use of null values for describing emptiness.

Read more here:
#55315 (comment)
and then #57500 (comment)

Testing instructions

• Tests should pass

Related to #55315

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-18796
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-18796&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~15 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                  +666 B  (+0.1%)     +122 B  (+0.0%)
entry-gutenboarding         -126 B  (-0.0%)       +6 B  (+0.0%)
entry-domains-landing       -126 B  (-0.0%)      -15 B  (-0.0%)
entry-browsehappy           -126 B  (-0.1%)      -15 B  (-0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1063 bytes removed 📉 [gzipped])

name                                 parsed_size           gzip_size
signup                                    -819 B  (-0.3%)     -211 B  (-0.4%)
reader                                    -819 B  (-0.1%)     -161 B  (-0.1%)
woocommerce-installation                  -806 B  (-0.5%)     -180 B  (-0.3%)
woocommerce                               -806 B  (-0.5%)     -180 B  (-0.3%)
themes                                    -806 B  (-0.2%)     -180 B  (-0.1%)
theme                                     -806 B  (-0.2%)     -180 B  (-0.2%)
stats                                     -806 B  (-0.1%)     -180 B  (-0.1%)
sites                                     -806 B  (-0.7%)     -180 B  (-0.5%)
site-purchases                            -806 B  (-0.1%)     -180 B  (-0.1%)
site-blocks                               -806 B  (-0.2%)     -180 B  (-0.2%)
settings-writing                          -806 B  (-0.1%)     -180 B  (-0.1%)
settings-security                         -806 B  (-0.2%)     -180 B  (-0.2%)
settings-performance                      -806 B  (-0.2%)     -180 B  (-0.2%)
settings-jetpack                          -806 B  (-0.4%)     -180 B  (-0.3%)
settings-discussion                       -806 B  (-0.3%)     -180 B  (-0.2%)
settings                                  -806 B  (-0.1%)     -180 B  (-0.1%)
security                                  -806 B  (-0.2%)     -180 B  (-0.1%)
scan                                      -806 B  (-0.2%)     -180 B  (-0.2%)
purchases                                 -806 B  (-0.1%)     -180 B  (-0.0%)
privacy                                   -806 B  (-0.2%)     -180 B  (-0.2%)
preview                                   -806 B  (-0.5%)     -180 B  (-0.4%)
posts-custom                              -806 B  (-0.2%)     -180 B  (-0.1%)
posts                                     -806 B  (-0.2%)     -180 B  (-0.1%)
plugins                                   -806 B  (-0.1%)     -180 B  (-0.1%)
people                                    -806 B  (-0.2%)     -180 B  (-0.2%)
pages                                     -806 B  (-0.2%)     -180 B  (-0.2%)
notification-settings                     -806 B  (-0.2%)     -180 B  (-0.2%)
me                                        -806 B  (-0.2%)     -180 B  (-0.2%)
marketplace                               -806 B  (-0.1%)     -180 B  (-0.1%)
marketing                                 -806 B  (-0.1%)     -180 B  (-0.1%)
jetpack-search                            -806 B  (-0.4%)     -180 B  (-0.3%)
jetpack-cloud-settings                    -806 B  (-0.4%)     -180 B  (-0.3%)
jetpack-cloud-pricing                     -806 B  (-0.2%)     -180 B  (-0.2%)
jetpack-cloud                             -806 B  (-0.6%)     -180 B  (-0.4%)
import                                    -806 B  (-0.3%)     -180 B  (-0.2%)
hosting                                   -806 B  (-0.2%)     -180 B  (-0.2%)
help                                      -806 B  (-0.2%)     -180 B  (-0.1%)
happychat                                 -806 B  (-0.2%)     -180 B  (-0.2%)
gutenberg-editor                          -806 B  (-0.2%)     -180 B  (-0.1%)
google-my-business                        -806 B  (-0.2%)     -180 B  (-0.2%)
export                                    -806 B  (-0.4%)     -180 B  (-0.3%)
email                                     -806 B  (-0.2%)     -180 B  (-0.1%)
earn                                      -806 B  (-0.2%)     -180 B  (-0.2%)
domains                                   -806 B  (-0.1%)     -180 B  (-0.0%)
customize                                 -806 B  (-0.5%)     -180 B  (-0.3%)
concierge                                 -806 B  (-0.2%)     -180 B  (-0.2%)
comments                                  -806 B  (-0.1%)     -180 B  (-0.1%)
checkout                                  -806 B  (-0.1%)     -180 B  (-0.0%)
backup                                    -806 B  (-0.1%)     -180 B  (-0.1%)
automated-transfer-state-middleware       -806 B  (-4.1%)     -239 B  (-3.8%)
activity                                  -806 B  (-0.1%)     -180 B  (-0.1%)
account-close                             -806 B  (-0.2%)     -180 B  (-0.2%)
account                                   -806 B  (-0.2%)     -180 B  (-0.1%)
purchase-product                          -782 B  (-0.8%)     -182 B  (-0.7%)
plans                                     -782 B  (-0.1%)     -151 B  (-0.1%)
migrate                                   -782 B  (-0.4%)     -172 B  (-0.3%)
media                                     -782 B  (-0.0%)     -169 B  (-0.0%)
jetpack-connect                           -782 B  (-0.1%)     -172 B  (-0.1%)
home                                      -782 B  (-0.1%)     -166 B  (-0.1%)
accept-invite                             -782 B  (-0.6%)     -178 B  (-0.5%)
incoming-redirect                          +24 B  (+0.3%)      +26 B  (+0.8%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~2358 bytes removed 📉 [gzipped])

name                                                     parsed_size           gzip_size
async-load-publish                                            -963 B  (-2.0%)     -401 B  (-2.6%)
async-load-calypso-my-sites-resume-editing                    -922 B  (-1.4%)     -247 B  (-1.2%)
async-load-calypso-blocks-support-article-dialog-dialog       -922 B  (-0.8%)     -152 B  (-0.4%)
async-load-design-wordpress-components-gallery                -806 B  (-0.1%)     -169 B  (-0.1%)
async-load-design-playground                                  -806 B  (-0.0%)     -136 B  (-0.0%)
async-load-design                                             -806 B  (-0.0%)     -136 B  (-0.0%)
async-load-calypso-lib-preferences-helper                     -806 B  (-8.4%)     -236 B  (-8.0%)
async-load-calypso-layout-guided-tours-component              -806 B  (-1.0%)     -187 B  (-0.8%)
async-load-calypso-layout-community-translator                -806 B  (-2.2%)     -227 B  (-2.1%)
async-load-calypso-components-happychat                       -806 B  (-4.3%)     -261 B  (-4.2%)
async-load-calypso-blocks-inline-help-popover                 -806 B  (-0.2%)     -183 B  (-0.1%)
async-load-design-blocks                                      -782 B  (-0.0%)     -172 B  (-0.0%)
async-load-signup-steps-user                                   +24 B  (+0.0%)       +8 B  (+0.0%)
async-load-calypso-post-editor-media-modal                     +24 B  (+0.0%)      +11 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal              +24 B  (+0.0%)      +11 B  (+0.0%)
async-load-calypso-layout-guided-tours                         +24 B  (+0.3%)       +2 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[escapemanuele]

Closing as no longer relevant