Debugging NgRx in NativeScript with Redux DevTools

Intro

NgRx needs practically no introduction in the current state of Angular applications. It allows you to manage your app’s state easily and make your UI react to the changes seamlessly. This tool is not exclusively for the web, so we can expect many NativeScript Angular applications to use it quite extensively.

Table of Contents:

1. Intro

Connecting Redux DevTools with NgRx for NativeScript

NgRx relies on the Redux DevTools Extension to be defined in the window and implement a specific (and relatively simple) interface. Redux Remote DevTools provides an option to connect to it remotely through SocketCluster, which uses WebSockets. Thankfully, we can now use the WebSockets plugin to polyfill them.

Overriding the Way NgRx Fetches the Redux Extension Implementation

Once we finished writing the Redux DevTools Extension interface, we needed to provide it to NgRx. Unfortunately, NgRx gets this information from the [‘__REDUX_DEVTOOLS_EXTENSION__’] window, which isn’t available in NativeScript. Polyfilling “window” is not the best approach either, as it could also lead to unintended side effects due to many libraries checking if a window exists to determine if they’re running in a browser environment or not. With a PR to NgRx, we were able to export the required symbol to override the way NgRx fetches the extension implementation.

Nativescript-ngrx-devtools Plugin: Features Review

Below is the overview of key plugin features, so you get to know it better before the installation.

How to Use the Plugin

To start using the plugin, first ensure to install both: it and our WebSockets Polyfill:

/**
* NativeScript Polyfills
*/
// Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame)
import '@nativescript/core/globals';
import '@valor/nativescript-websockets'; // add this line!
@NgModule({
imports: [
NativeScriptModule,
StoreModule.forRoot(
{
counter: reducer,
},
{
initialState: {
counter: initialState,
},
}
),
...(__DEV__ ? [ // ensure this code is tree shaken in prod
StoreDevtoolsModule.instrument(),
NativeScriptNgRxDevtoolsModule.forRoot()
] : []),

],
declarations: [AppComponent],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

Caveats

Redux DevTools already has a couple of caveats on the web, like having it crash by storing certain kinds of non-serializable objects. This also applies to NativeScript, and the fact that ignoring those caveats can also crash your app makes them even worse. Here’s an example from one of the projects we’re working on now. When testing the plugin on a large mobile app that has modals with high-definition images, we noticed that the app would crash due to a memory lack. The issue was that the action that was sent to the DevTools, contained a reference to the modal itself, so it was never garbage collected, and every time it opened, the memory would increase. Connecting to the DevTools also made the app take a performance hit as it was trying to serialize massive objects.

Useful Links

- nativescript-websockets plugin

--

--

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
Valor Software

Valor Software

Useful articles from experienced Valor specialists in various spheres of digital development.