Add Redux

Author: gaearon

fixtures/nesting/package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "postinstall": "run-p install:*",

fixtures/nesting/src/legacy/Greeting.js

@@ -2,10 +2,12 @@ import React from 'react';
 import {Component} from 'react';
 import {findDOMNode} from 'react-dom';
 import {Link} from 'react-router-dom';
+import {connect} from 'react-redux';
+
 import ThemeContext from './shared/ThemeContext';
 import Clock from './shared/Clock';
 
-export default class AboutSection extends Component {
+class AboutSection extends Component {
   static contextType = ThemeContext;
 
   componentDidMount() {
@@ -23,10 +25,22 @@ export default class AboutSection extends Component {
           This component is rendered by the nested React.
         </h4>
         <Clock />
+        <p>
+          Counter: {this.props.counter}{' '}
+          <button onClick={() => this.props.dispatch({type: 'increment'})}>
+            +
+          </button>
+        </p>
         <b>
           <Link to="/">Go to Home</Link>
         </b>
       </div>
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {counter: state};
+}
+
+export default connect(mapStateToProps)(AboutSection);

fixtures/nesting/src/legacy/createLegacyRoot.js

@@ -7,14 +7,17 @@ import ThemeContext from './shared/ThemeContext';
 // Note: this is a semi-private API, but it's ok to use it
 // if we never inspect the values, and only pass them through.
 import {__RouterContext} from 'react-router';
+import {ReactReduxContext} from 'react-redux';
 
 // Pass through every context required by this tree.
 // The context object is populated in src/modern/withLegacyRoot.
 function Bridge({children, context}) {
   return (
     <ThemeContext.Provider value={context.theme}>
       <__RouterContext.Provider value={context.router}>
-        {children}
+        <ReactReduxContext.Provider value={context.reactRedux}>
+          {children}
+        </ReactReduxContext.Provider>
       </__RouterContext.Provider>
     </ThemeContext.Provider>
   );

fixtures/nesting/src/legacy/package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "react": "0.0.0-3d0895557",
     "react-dom": "0.0.0-3d0895557",
+    "react-redux": "7.2.1",
     "react-router-dom": "5.2.0"
   }
 }

fixtures/nesting/src/modern/AboutPage.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import {useContext} from 'react';
+import {connect} from 'react-redux';
 
 import ThemeContext from './shared/ThemeContext';
 import lazyLegacyRoot from './lazyLegacyRoot';
 
 // Lazy-load a component from the bundle using legacy React.
 const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting'));
 
-export default function AboutPage() {
+function AboutPage({counter, dispatch}) {
   const theme = useContext(ThemeContext);
   return (
     <>
@@ -16,6 +17,17 @@ export default function AboutPage() {
         This component is rendered by the outer React.
       </h3>
       <Greeting />
+      <br />
+      <p>
+        Counter: {counter}{' '}
+        <button onClick={() => dispatch({type: 'increment'})}>+</button>
+      </p>
     </>
   );
 }
+
+function mapStateToProps(state) {
+  return {counter: state};
+}
+
+export default connect(mapStateToProps)(AboutPage);

fixtures/nesting/src/modern/HomePage.js

@@ -5,7 +5,7 @@ import {Link} from 'react-router-dom';
 import ThemeContext from './shared/ThemeContext';
 import Clock from './shared/Clock';
 
-export default function HomePage() {
+export default function HomePage({counter, dispatch}) {
   const theme = useContext(ThemeContext);
   return (
     <>

fixtures/nesting/src/modern/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import {StrictMode} from 'react';
 import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
 import App from './App';
+import {store} from '../store';
 
 ReactDOM.render(
   <StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </StrictMode>,
   document.getElementById('root')
 );

fixtures/nesting/src/modern/lazyLegacyRoot.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import {useContext, useMemo, useRef, useState, useLayoutEffect} from 'react';
-
 import {__RouterContext} from 'react-router';
+import {ReactReduxContext} from 'react-redux';
+
 import ThemeContext from './shared/ThemeContext';
 
 let rendererModule = {
@@ -29,12 +30,14 @@ export default function lazyLegacyRoot(getLegacyComponent) {
     // Then in src/legacy/createLegacyRoot we will apply them.
     const theme = useContext(ThemeContext);
     const router = useContext(__RouterContext);
+    const reactRedux = useContext(ReactReduxContext);
     const context = useMemo(
       () => ({
         theme,
         router,
+        reactRedux,
       }),
-      [theme, router]
+      [theme, router, reactRedux]
     );
 
     // Create/unmount.

fixtures/nesting/src/modern/package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "react": "0.0.0-3d0895557",
     "react-dom": "0.0.0-3d0895557",
+    "react-redux": "7.2.1",
     "react-router-dom": "5.2.0"
   }
 }

fixtures/nesting/src/store.js

@@ -0,0 +1,12 @@
+import {createStore} from 'redux';
+
+function reducer(state = 0, action) {
+  switch (action.type) {
+    case 'increment':
+      return state + 1;
+    default:
+      return state;
+  }
+}
+
+export const store = createStore(reducer);