sophisticated react and redux

Author: rwieruch

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
     "redux": "^3.6.0"
   },
   "scripts": {

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { combineReducers, createStore } from 'redux';
+import { Provider, connect } from 'react-redux';
 import './index.css';
 
 // action types
@@ -122,15 +123,25 @@ function TodoItem({ todo, onToggleTodo }) {
   );
 }
 
-function render() {
-  ReactDOM.render(
-    <TodoApp
-      todos={store.getState().todoState}
-      onToggleTodo={id => store.dispatch(doToggleTodo(id))}
-    />,
-    document.getElementById('root')
-  );
+// Connecting React and Redux
+
+function mapStateToProps(state) {
+  return {
+    todos: state.todoState,
+  };
 }
 
-store.subscribe(render);
-render();
+function mapDispatchToProps(dispatch) {
+  return {
+     onToggleTodo: id => dispatch(doToggleTodo(id)),
+  };
+}
+
+const ConnectedTodoApp = connect(mapStateToProps, mapDispatchToProps)(TodoApp);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <ConnectedTodoApp />
+  </Provider>,
+  document.getElementById('root')
+);