diff --git a/components/RemoveCompletedButton.js b/components/RemoveCompletedButton.js
index 136f305..3499eab 100644
--- a/components/RemoveCompletedButton.js
+++ b/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(
- ,
+ ,
document.querySelector('[data-react-component="RemoveCompletedButton"]')
);
diff --git a/index.html b/index.html
index 920c01d..f7cadff 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,10 @@
To Do List
+
+
+
diff --git a/jquery/todo.js b/jquery/todo.js
index abb1fa2..0898686 100644
--- a/jquery/todo.js
+++ b/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));
}
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..d79c9d8
--- /dev/null
+++ b/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);