sophisticated connecting

Author: rwieruch

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,23 @@ function TodoItem({ todo, onToggleTodo }) {
   );
 }
 
-function render() {
-  ReactDOM.render(
-    <TodoApp
-      todos={store.getState().todoState}
-      onToggleTodo={id => store.dispatch(doToggleTodo(id))}
-    />,
-    document.getElementById('root')
-  );
+function mapStateToProps(state) {
+  return {
+    todos: state.todoState,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+     onToggleTodo: id => dispatch(doToggleTodo(id)),
+  };
 }
 
-store.subscribe(render);
-render();
+const ConnectedTodoApp = connect(mapStateToProps, mapDispatchToProps)(TodoApp);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <ConnectedTodoApp />
+  </Provider>,
+  document.getElementById('root')
+);