Home
The rfluxx-debug
package contains a debug window that can be used to analyze the behaviour of the rfluxx library.
Currently it supports showing data from several stores in the routing library.
Setup
Adding the debug window is quite simple.
First install the rfluxx debug package via npm:
npm i --save rfluxx-debug
Then you need to register the stores required for the debug window in the global container factory:
export class ContainerFactory extends GlobalContainerFactoryBase
{
protected registerStores(builder: IGlobalContainerBuilder): void
{
// your registrations
// ...
registerRfluxxDebug(builder);
}
}
Finally, add the debug window into your page master.
public render(): any
{
return <div>
{
// the rest of your master
// ...
}
<DebugWindow storeRegistrationKey="IDebugWindowStore" />
</div>;
}
This will render a button which can be used to open the debug window. You can place it wherever you like.
Notice
The debug window uses the material-ui library to render its contents.
Production Build
In production builds you usually want to exclude/hide the debug window.
Hiding can be achieved by e.g. using the webpack define plugin and setting a PRODUCTION
. Use this variable to conditionally render the window.
// after your imports
declare var PRODUCTION;
// more stuff
public render(): any
{
return <div>
{
// the rest of your master
// ...
}
{ !PRODUCTION &&
<DebugWindow storeRegistrationKey="IDebugWindowStore" />
}
</div>;
}