Add Redux to manage shared state between React and jQuery

components/RemoveCompletedButton.js

@@ -1,4 +1,4 @@
-class RemoveCompletedButton extends React.Component {
+class UnconnectedRemoveCompletedButton extends React.Component {
     handleClick() {
         removeCheckedItems();
     }
@@ -15,11 +15,14 @@ class RemoveCompletedButton extends React.Component {
     }
 }
 
-RemoveCompletedButton.defaultProps = {
-    show: false
-};
+function mapStateToProps(state) {
+    return {
+        show: state.hasCompletedItems
+    };
+}
+var RemoveCompletedButton = ReactRedux.connect(mapStateToProps)(UnconnectedRemoveCompletedButton);
 
 ReactDOM.render(
-    <RemoveCompletedButton />,
+    <RemoveCompletedButton store={store} />,
     document.querySelector('[data-react-component="RemoveCompletedButton"]')
 );

index.html

@@ -17,7 +17,10 @@ <h1>To Do List</h1>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/redux.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/react-redux.js"></script>
 <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
+<script src="store/index.js" type="text/babel"></script>
 <script src="jquery/todo.js" type="text/javascript"></script>
 <script src="components/AddTodoInput.js" type="text/babel"></script>
 <script src="components/RemoveCompletedButton.js" type="text/babel"></script>

jquery/todo.js

@@ -47,9 +47,6 @@ function removeCheckedItems() {
 
 function maybeHideDeleteAll() {
     var completedItems = $('#todos input:checked').length;
-    ReactDOM.render(
-        React.createElement(RemoveCompletedButton, { show: completedItems > 0 }),
-        document.querySelector('[data-react-component="RemoveCompletedButton"]')
-    );
+    store.dispatch(setHasCompletedItems(completedItems > 0));
 }
 

store/index.js

@@ -0,0 +1,20 @@
+// The initial state of our store
+const initialState = {
+    hasCompletedItems: false
+};
+
+function setHasCompletedItems(hasCompletedItems = false) {
+    return {
+        type: 'SET_HAS_COMPLETED_ITEMS',
+        hasCompletedItems: hasCompletedItems
+    };
+}
+
+function reducer(state = initialState, action) {
+    if (action.type = 'SET_HAS_COMPLETED_ITEMS') {
+        return { hasCompletedItems: action.hasCompletedItems };
+    }
+    return state;
+}
+
+var store = Redux.createStore(reducer);