diff --git a/packages/redux-devtools-core/src/app/actions/index.ts b/packages/redux-devtools-core/src/app/actions/index.ts index 573f6f13..0a9e9bd0 100644 --- a/packages/redux-devtools-core/src/app/actions/index.ts +++ b/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; +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; + monitorProps: unknown; +} +export interface MonitorActionAction { type: typeof MONITOR_ACTION; - action: Action; + action: InitMonitorAction; + monitorReducer: ( + monitorProps: unknown, + state: unknown | undefined, + action: Action + ) => unknown; + monitorProps: unknown; } interface LiftedActionAction { type: typeof LIFTED_ACTION; @@ -76,7 +96,7 @@ interface LiftedActionAction { action: Action; } export function liftedDispatch( - action: Action + 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; diff --git a/packages/redux-devtools-core/src/app/containers/DevTools.tsx b/packages/redux-devtools-core/src/app/containers/DevTools.tsx index ce7cc4a9..96ef7868 100644 --- a/packages/redux-devtools-core/src/app/containers/DevTools.tsx +++ b/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> | InitMonitorAction + ) => void; +} + +class DevTools extends Component { + monitorProps: unknown; + Monitor?: Monitor< + unknown, + Action, + LiftedState, unknown>, + unknown, + Action + >; + 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>) => { + dispatch = ( + action: LiftedAction, unknown> | InitMonitorAction + ) => { this.props.dispatch(action); }; diff --git a/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.tsx b/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.tsx index fd6d0b57..7c0b1584 100644 --- a/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.tsx +++ b/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; +type Props = DispatchProps; + +class Dispatcher extends Component { 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); diff --git a/packages/redux-devtools-core/src/app/containers/monitors/Slider.tsx b/packages/redux-devtools-core/src/app/containers/monitors/Slider.tsx index 8363108c..254dc9af 100644 --- a/packages/redux-devtools-core/src/app/containers/monitors/Slider.tsx +++ b/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>; + dispatch: Dispatch, unknown>>; + theme: +} + +class Slider extends Component { + shouldComponentUpdate(nextProps: Props) { return ( nextProps.liftedState !== this.props.liftedState || nextProps.theme.scheme !== this.props.theme.scheme diff --git a/packages/redux-devtools-core/src/app/index.tsx b/packages/redux-devtools-core/src/app/index.tsx index 47bfe76e..836490b1 100644 --- a/packages/redux-devtools-core/src/app/index.tsx +++ b/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 { + store?: Store; -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(); }); diff --git a/packages/redux-devtools-core/src/app/middlewares/api.ts b/packages/redux-devtools-core/src/app/middlewares/api.ts index 27394c44..9656efdd 100644 --- a/packages/redux-devtools-core/src/app/middlewares/api.ts +++ b/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'; diff --git a/packages/redux-devtools-core/src/app/reducers/monitor.ts b/packages/redux-devtools-core/src/app/reducers/monitor.ts index fe8fedbb..2ec84a61 100644 --- a/packages/redux-devtools-core/src/app/reducers/monitor.ts +++ b/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: diff --git a/packages/redux-devtools-core/src/app/store/configureStore.ts b/packages/redux-devtools-core/src/app/store/configureStore.ts index 9bcb0c1b..c7ff4ad9 100644 --- a/packages/redux-devtools-core/src/app/store/configureStore.ts +++ b/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, + restoredState: Partial | 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(persistConfig, (err, restoredState) => { let composeEnhancers = compose; if (process.env.NODE_ENV !== 'production') { if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {