chore: put global reducer in StateInspector

gmus-web/src/components/root.tsx

@@ -1,19 +1,16 @@
-import React, { Reducer, useCallback, useReducer, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useReducer } from 'reinspect';
 
-import { AnyAction, nameSet } from '../actions';
+import { nameSet } from '../actions';
 import { DispatchContext, StateContext } from '../context/state';
 import { useDispatchWithEffects, useOnMessage, useSocket } from '../hooks/socket';
-import { globalReducer, GlobalState, initialState } from '../reducer';
+import { globalReducer, initialState } from '../reducer';
 import { init } from '../utils/state';
 import { App } from './app';
 import { Identify } from './identify';
 
 export const Root: React.FC = () => {
-  const [state, dispatch] = useReducer<Reducer<GlobalState, AnyAction>, GlobalState>(
-    globalReducer,
-    initialState,
-    init,
-  );
+  const [state, dispatch] = useReducer(globalReducer, initialState, init, 'global');
 
   const onMessage = useOnMessage(dispatch);
 

gmus-web/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { StateInspector } from 'reinspect';
 import { Reset } from 'styled-reset';
 
 import { Root } from './components/root';
@@ -8,7 +9,9 @@ import reportWebVitals from './reportWebVitals';
 ReactDOM.render(
   <React.StrictMode>
     <Reset />
-    <Root />
+    <StateInspector name="global">
+      <Root />
+    </StateInspector>
   </React.StrictMode>,
   document.getElementById('root'),
 );