@ethicdevs/react-global-state-hooks-debugger NPM

`react-global-state-hooks-debugger`

A small WebSocket based debugger for use with the react-global-state-hooks library.

demo screenshot

Installation

$ yarn add @ethicdevs/react-global-state-hooks-debugger
# or
$ npm i @ethicdevs/react-global-state-hooks-debugger

Usage

Launch the debugger in a new terminal tab, reload your application (react-native reload, page refresh, for example), open the debugger browser UI, enjoy!

$ yarn rgsh-debugger
# ... => http://localhost:7979

then in the App component where you provide the GlobalStateContext add something like this:

+ import { makeGetDebuggerLogger } from "@ethicdevs/react-global-state-hooks-debugger";

+ const getDebuggerLogger = makeGetDebuggerLogger({
+   wsUri: 'ws://localhost:8080', // default: ws://10.0.2.2 (so it works with react-native on remote device by default)
+ });

+ const getLogger = process.env.NODE_ENV === 'development'
+   ? getDebuggerLogger
+   : getCustomLogger; // | undefined to use built-in getConsoleLogger

const AppWithProviders = () => {

  return (
    <>
      <GlobalStateProvider
        initialState={initialState}
+       getLogger={getLogger}
        rootReducer={
          rootReducer as unknown as Reducer<FluxBaseState, FluxStandardAction>
        }
      >
        <AuthProvider>
          <AppearanceProvider>
            <App />
          </AppearanceProvider>
        </AuthProvider>
      </GlobalStateProvider>
    </>
  );
};