Update react-redux to 6.0 + Use context for custom store

The `storeKey` method for supporting multiple stores was dropped in react-redux v6.

Author: Oblosys

examples/parent-child-demo/package.json

@@ -1,20 +1,20 @@
 {
   "name": "react-lifecycle-visualizer-demo",
-  "version": "0.1",
+  "version": "1.0",
   "description": "Dummy configuration for StackBlitz deployment. Don't use this to build the demo; use the top-level package.json instead",
   "main": "src/index.jsx",
   "homepage": "https://stackblitz.com/github/Oblosys/react-lifecycle-visualizer/tree/master/examples/parent-child-demo",
   "scripts": {
   "start": "echo \"Error: This dummy package.json is only for StackBlitz deployment. Use top-level package.json instead.\" && exit 1"
   },
   "devDependencies": {
-    "react-scripts": "^1.1.5"
+    "react-scripts": "^2.1.3"
   },
   "dependencies": {
     "prop-types": "^15.6.2",
-    "react": "16.5.1",
-    "react-dom": "16.5.1",
-    "react-hot-loader": "4.3.8",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-hot-loader": "4.6.3",
     "react-lifecycle-visualizer": "^2.1.1"
   }
 }

package-lock.json

@@ -86,7 +86,7 @@
   "dependencies": {
     "hoist-non-react-statics": "^3.3.0",
     "prop-types": "^15.6.2",
-    "react-redux": "^5.1.1",
+    "react-redux": "^6.0.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"
   },

package.json

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import * as constants from '../constants';
+import { LifecycleVisualizerContext } from '../redux/VisualizerProvider';
 
 const LifecyclePanel = (props) => {
   const {componentName, isLegacy, instanceId, highlightedMethod, implementedMethods} = props;
@@ -54,4 +55,4 @@ const mapStateToProps = ({logEntries, highlightedIndex}) => ({
   : null
 });
 
-export default connect(mapStateToProps, null, null, {storeKey: constants.reduxStoreKey})(LifecyclePanel);
+export default connect(mapStateToProps, null, null, {context: LifecycleVisualizerContext})(LifecyclePanel);

src/components/LifecyclePanel.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 
 import * as constants from '../constants';
 import * as ActionCreators from '../redux/actionCreators';
+import { LifecycleVisualizerContext } from '../redux/VisualizerProvider';
 import LogEntries from './LogEntries';
 import SimpleButton from './SimpleButton';
 
@@ -77,4 +78,4 @@ class Log extends Component {
 const mapStateToProps = ({logEntries, highlightedIndex, replayTimerId, replayTimerDelay}) =>
   ({logEntries, highlightedIndex, replayTimerId, replayTimerDelay});
 
-export default connect(mapStateToProps, ActionCreators, null, {storeKey: constants.reduxStoreKey})(Log);
+export default connect(mapStateToProps, ActionCreators, null, {context: LifecycleVisualizerContext})(Log);

src/components/Log.jsx

@@ -42,7 +42,7 @@ const lifecycleMethods = [
 export const lifecycleMethodNames =
   lifecycleMethods.filter((mthd) => !mthd.isLegacy).map(({name}) => name);
 
-// We don't show UNSAFE_ methods in the panel, but just use the shorter old names.
+// We don't show 'UNSAFE_..' in the panel, but just use the shorter old names.
 export const lifecycleMethodNamesLegacyNoUnsafe =
   lifecycleMethods.filter(
     (mthd) => !mthd.isNew && !mthd.name.startsWith('UNSAFE_')
@@ -54,8 +54,6 @@ export const lifecycleMethodNamesNewOnly =
 export const lifecycleMethodNamesLegacyOnly =
   lifecycleMethods.filter((mthd) => mthd.isLegacy).map(({name}) => name);
 
-export const reduxStoreKey = 'lifecycleVisualizerStore';
-
 const sessionStorageKey = '@@react-lifecycle-visualizer--persistent-state:';
 export const sessionReplayTimerDelayKey = sessionStorageKey + 'replayTimerDelay';
 

src/constants.js

@@ -1,25 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { createProvider } from 'react-redux';
+import { Provider } from 'react-redux';
 import { applyMiddleware, createStore } from 'redux';
 import thunk from 'redux-thunk';
 
-import * as constants from '../constants';
 import * as actionCreators from './actionCreators';
 import { reducer } from './reducer';
 
-const Provider = createProvider(constants.reduxStoreKey);
+// Context for the lifecycle-visualizer store
+export const LifecycleVisualizerContext = React.createContext();
 
-const store = createStore(
+export const store = createStore(
   reducer,
   applyMiddleware(thunk)
 );
 
 export const clearLog = () => store.dispatch(actionCreators.clearLog());
-// Store never changes, so we can safely export this bound function.
+// The store never changes, so we can safely export this bound function.
 
 const VisualizerProvider = ({children}) => (
-  <Provider store={store}>{children}</Provider>
+  <Provider store={store} context={LifecycleVisualizerContext}>{children}</Provider>
 );
 
 VisualizerProvider.propTypes = {

src/redux/VisualizerProvider.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import hoistStatics from 'hoist-non-react-statics';
-import PropTypes from 'prop-types';
 
 import * as constants from './constants';
 import * as ActionCreators from './redux/actionCreators';
@@ -10,6 +9,7 @@ import { MConstructor, MShouldUpdate, MRender, MDidMount,
          MDidUpdate, MWillUnmount, MSetState, MGetDerivedState, MGetSnapshot,
          MWillMount, MWillReceiveProps, MWillUpdate,
          MUnsafeWillMount, MUnsafeWillReceiveProps, MUnsafeWillUpdate} from './constants';
+import { store as lifecycleVisualizerStore } from './redux/VisualizerProvider';
 
 const instanceIdCounters = {};
 
@@ -189,26 +189,21 @@ export default function traceLifecycle(ComponentToTrace) {
       this.LifecyclePanel = WrappedLifecyclePanel;
 
       this.trace = (methodName) => {
-          this.context[constants.reduxStoreKey].dispatch(
-            ActionCreators.trace(componentToTraceName, instanceId, methodName)
-          );
-        };
+        // Just dispatch on lifecycleVisualizerStore directly, rather than introducing complexity by using context.
+        lifecycleVisualizerStore.dispatch(
+          ActionCreators.trace(componentToTraceName, instanceId, methodName)
+        );
+      };
     }
 
     render() {
       return <TracedComponent LifecyclePanel={this.LifecyclePanel} trace={this.trace} {...this.props}/>;
     }
 
-    // Get store directly from context, to prevent introducing extra `Connect` component.
-    static contextTypes = {
-      ...ComponentToTrace.contextTypes, // preserve contextTypes from ComponentToTrace
-      [constants.reduxStoreKey]: PropTypes.object
-    }
-
     static displayName = `traceLifecycle(${componentToTraceName})`;
   }
 
-  // Removing the inappropriate methods is simpler than adding appropriate methods to prototype
+  // Removing the inappropriate methods is simpler than adding appropriate methods to prototype.
   if (isLegacy) {
     delete TracedComponent.getDerivedStateFromProps;
     delete TracedComponent.prototype.getSnapshotBeforeUpdate;