stash

packages/redux-devtools-core/src/app/actions/index.ts

@@ -37,8 +37,12 @@ import {
 } from '../constants/socketActionTypes';
 import { Action } from 'redux';
 
-let monitorReducer;
-let monitorProps = {};
+let monitorReducer: (
+  monitorProps: unknown,
+  state: unknown | undefined,
+  action: Action<unknown>
+) => unknown;
+let monitorProps: unknown = {};
 
 interface ChangeSectionAction {
   readonly type: typeof CHANGE_SECTION;
@@ -66,9 +70,25 @@ export function changeTheme(data: ChangeThemeData): ChangeThemeAction {
   return { type: CHANGE_THEME, ...data.formData };
 }
 
-interface MonitorActionAction {
+export interface InitMonitorAction {
+  type: '@@INIT_MONITOR';
+  newMonitorState: unknown;
+  update: (
+    monitorProps: unknown,
+    state: unknown | undefined,
+    action: Action<unknown>
+  ) => unknown;
+  monitorProps: unknown;
+}
+export interface MonitorActionAction {
   type: typeof MONITOR_ACTION;
-  action: Action<unknown>;
+  action: InitMonitorAction;
+  monitorReducer: (
+    monitorProps: unknown,
+    state: unknown | undefined,
+    action: Action<unknown>
+  ) => unknown;
+  monitorProps: unknown;
 }
 interface LiftedActionAction {
   type: typeof LIFTED_ACTION;
@@ -76,7 +96,7 @@ interface LiftedActionAction {
   action: Action<unknown>;
 }
 export function liftedDispatch(
-  action: Action<unknown>
+  action: InitMonitorAction
 ): MonitorActionAction | LiftedActionAction {
   if (action.type[0] === '@') {
     if (action.type === '@@INIT_MONITOR') {
@@ -188,7 +208,7 @@ export function toggleDispatcher(): ToggleDispatcherAction {
 }
 
 export type ConnectionType = 'disabled' | 'remotedev' | 'custom';
-interface ConnectionOptions {
+export interface ConnectionOptions {
   readonly type: ConnectionType;
   readonly hostname: string;
   readonly port: number;

packages/redux-devtools-core/src/app/containers/DevTools.tsx

@@ -1,22 +1,41 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
-import { LiftedAction } from 'redux-devtools-instrument';
+import { LiftedAction, LiftedState } from 'redux-devtools-instrument';
 import { Action } from 'redux';
+import { Monitor } from 'redux-devtools';
 import getMonitor from '../utils/getMonitor';
+import { InitMonitorAction } from '../actions';
 
-class DevTools extends Component {
-  constructor(props) {
+interface Props {
+  monitor: string;
+  dispatch: (
+    action: LiftedAction<unknown, Action<unknown>, unknown> | InitMonitorAction
+  ) => void;
+}
+
+class DevTools extends Component<Props> {
+  monitorProps: unknown;
+  Monitor?: Monitor<
+    unknown,
+    Action<unknown>,
+    LiftedState<unknown, Action<unknown>, unknown>,
+    unknown,
+    Action<unknown>
+  >;
+  preventRender?: boolean;
+
+  constructor(props: Props) {
     super(props);
     this.getMonitor(props, props.monitorState);
   }
 
-  getMonitor(props, skipUpdate) {
+  getMonitor(props: Props, skipUpdate: unknown) {
     const monitorElement = getMonitor(props);
     this.monitorProps = monitorElement.props;
     this.Monitor = monitorElement.type;
 
-    const update = this.Monitor.update;
+    const update = this.Monitor!.update;
     if (update) {
       let newMonitorState;
       const monitorState = props.monitorState;
@@ -54,7 +73,9 @@ class DevTools extends Component {
     );
   }
 
-  dispatch = (action: LiftedAction<unknown, Action<unknown>, unknown>) => {
+  dispatch = (
+    action: LiftedAction<unknown, Action<unknown>, unknown> | InitMonitorAction
+  ) => {
     this.props.dispatch(action);
   };
 

packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.tsx

@@ -4,8 +4,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Button, Select, Editor, Toolbar } from 'devui';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { connect, ResolveThunks } from 'react-redux';
 import { dispatchRemotely } from '../../actions';
 
 export const DispatcherContainer = styled.div`
@@ -47,7 +46,10 @@ export const ActionContainer = styled.div`
   }
 `;
 
-class Dispatcher extends Component {
+type DispatchProps = ResolveThunks<typeof actionCreators>;
+type Props = DispatchProps;
+
+class Dispatcher extends Component<Props> {
   static propTypes = {
     options: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
@@ -208,10 +210,8 @@ class Dispatcher extends Component {
   }
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    dispatch: bindActionCreators(dispatchRemotely, dispatch),
-  };
-}
+const actionCreators = {
+  dispatch: dispatchRemotely,
+};
 
-export default connect(null, mapDispatchToProps)(Dispatcher);
+export default connect(null, actionCreators)(Dispatcher);

packages/redux-devtools-core/src/app/containers/monitors/Slider.tsx

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 import SliderMonitor from 'redux-devtools-slider-monitor';
+import { LiftedAction, LiftedState } from 'redux-devtools-instrument';
+import { Action, Dispatch } from 'redux';
 
 const SliderWrapper = styled.div`
   border-color: ${(props) => props.theme.base02};
@@ -9,8 +11,14 @@ const SliderWrapper = styled.div`
   border-width: 1px 0;
 `;
 
-class Slider extends Component {
-  shouldComponentUpdate(nextProps) {
+interface Props {
+  liftedState: LiftedState<unknown, Action<unknown>, unknown>;
+  dispatch: Dispatch<LiftedAction<unknown, Action<unknown>, unknown>>;
+  theme:
+}
+
+class Slider extends Component<Props> {
+  shouldComponentUpdate(nextProps: Props) {
     return (
       nextProps.liftedState !== this.props.liftedState ||
       nextProps.theme.scheme !== this.props.theme.scheme

packages/redux-devtools-core/src/app/index.tsx

@@ -2,17 +2,26 @@ import 'devui/lib/presets';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import configureStore from './store/configureStore';
 import { CONNECT_REQUEST } from './constants/socketActionTypes';
 import App from './containers/App';
+import { StoreState } from './reducers';
+import { ConnectionOptions, StoreAction } from './actions';
+
+interface Props {
+  socketOptions: ConnectionOptions;
+}
+
+class Root extends Component<Props> {
+  store?: Store<StoreState, StoreAction>;
 
-class Root extends Component {
   UNSAFE_componentWillMount() {
     configureStore((store, preloadedState) => {
       this.store = store;
       store.dispatch({
         type: CONNECT_REQUEST,
-        options: preloadedState.connection || this.props.socketOptions,
+        options: preloadedState!.connection || this.props.socketOptions,
       });
       this.forceUpdate();
     });

packages/redux-devtools-core/src/app/middlewares/api.ts

@@ -1,6 +1,6 @@
 import socketCluster, { SCClientSocket } from 'socketcluster-client';
 import { stringify } from 'jsan';
-import { Dispatch, Middleware, MiddlewareAPI, Store } from 'redux';
+import { Dispatch, MiddlewareAPI } from 'redux';
 import socketOptions from '../constants/socketOptions';
 import * as actions from '../constants/socketActionTypes';
 import { getActiveInstance } from '../reducers/instances';

packages/redux-devtools-core/src/app/reducers/monitor.ts

@@ -5,9 +5,14 @@ import {
   TOGGLE_SLIDER,
   TOGGLE_DISPATCHER,
 } from '../constants/actionTypes';
-import { StoreAction } from '../actions';
+import { MonitorActionAction, StoreAction } from '../actions';
 
-export interface MonitorState {}
+export interface MonitorState {
+  selected: string;
+  monitorState: unknown | undefined;
+  sliderIsOpen: boolean;
+  dispatcherIsOpen: boolean;
+}
 
 const initialState = {
   selected: 'InspectorMonitor',
@@ -16,7 +21,10 @@ const initialState = {
   dispatcherIsOpen: false,
 };
 
-export function dispatchMonitorAction(state, action) {
+export function dispatchMonitorAction(
+  state: MonitorState,
+  action: MonitorActionAction
+) {
   return {
     ...state,
     monitorState:

packages/redux-devtools-core/src/app/store/configureStore.ts

@@ -1,20 +1,31 @@
-import { createStore, compose, applyMiddleware } from 'redux';
+import { createStore, compose, applyMiddleware, Store } from 'redux';
 import localForage from 'localforage';
-import { getStoredState, createPersistor } from 'redux-persist';
+import {
+  getStoredState,
+  createPersistor,
+  PersistorConfig,
+} from 'redux-persist';
 import api from '../middlewares/api';
 import exportState from '../middlewares/exportState';
-import rootReducer from '../reducers';
+import rootReducer, { StoreState } from '../reducers';
+import { StoreAction } from '../actions';
 
-export default function configureStore(callback, key) {
-  const persistConfig = {
+export default function configureStore(
+  callback: (
+    store: Store<StoreState, StoreAction>,
+    restoredState: Partial<StoreState> | undefined
+  ) => void,
+  key?: string
+) {
+  const persistConfig: PersistorConfig = ({
     keyPrefix: `redux-devtools${key || ''}:`,
     blacklist: ['instances', 'socket'],
     storage: localForage,
-    serialize: (data) => data,
-    deserialize: (data) => data,
-  };
+    serialize: (data: unknown) => data,
+    deserialize: (data: unknown) => data,
+  } as unknown) as PersistorConfig;
 
-  getStoredState(persistConfig, (err, restoredState) => {
+  getStoredState<StoreState>(persistConfig, (err, restoredState) => {
     let composeEnhancers = compose;
     if (process.env.NODE_ENV !== 'production') {
       if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {