Updated example code.

examples/todoApp/out/.waspinfo

@@ -1 +1 @@
-Generated on 2020-02-06 11:29:32.520063004 UTC by waspc version "0.1.0.0" .
+Generated on 2020-02-14 13:11:20.518192 UTC by waspc version "0.1.0.0" .

examples/todoApp/out/src/Main.js

@@ -17,19 +17,7 @@ export class Main extends Component {
 
   render() {
     return (
-      <>
-        { /* Here we use Todo React component that we imported at the beginning of this file. */ }
-        <Todo
-            addTask={this.props.addTask}
-            taskList={this.props.taskList}
-            updateTask={this.props.updateTask}
-            removeTask={this.props.removeTask}
-        >
-        </Todo>
-        <div className="mainPage__nav">
-            <a href="/about" className="mainPage__nav__aboutLink"> About </a>
-        </div>
-    </>
+      <Todo/>
     )
   }
 }

examples/todoApp/out/src/ext-src/Todo.js

@@ -1,6 +1,7 @@
 // As seen here, we can import npm packages used in code generated by Wasp, which will be clearly defined.
 // In the future, we will of course also be able to specify additional packages as dependencies.
 import React from 'react'
+import { connect } from 'react-redux'
 
 // As seen here, we can import specific components/code generated by Wasp.
 // These will have well defined and documented APIs and paths.
@@ -9,6 +10,8 @@ import React from 'react'
 import Task from '../entities/task/Task'
 import NewTaskForm from '../entities/task/components/NewTaskForm'
 import TaskList from '../entities/task/components/TaskList'
+import * as taskState from '../entities/task/state.js'
+import * as taskActions from '../entities/task/actions.js'
 
 const TASK_FILTER_TYPES = Object.freeze({
   ALL: 'all',
@@ -22,7 +25,7 @@ const TASK_FILTERS = Object.freeze({
   [TASK_FILTER_TYPES.COMPLETED]: task => task.isDone
 })
 
-export default class Todo extends React.Component {
+class Todo extends React.Component {
   // TODO: prop types.
 
   state = {
@@ -106,3 +109,11 @@ export default class Todo extends React.Component {
     )
   }
 }
+
+export default connect(state => ({
+  taskList: taskState.selectors.all(state)
+}), {
+  addTask: taskActions.add,
+  updateTask: taskActions.update,
+  removeTask: taskActions.remove
+})(Todo)

examples/todoApp/out/src/router.js

@@ -2,14 +2,12 @@ import React from 'react'
 import { Route, BrowserRouter as Router } from 'react-router-dom'
 
 import Main from './Main'
-import About from './About'
 
 
 const router = (
   <Router>
     <div>
       <Route exact path="/" component={ Main }/>
-      <Route exact path="/about" component={ About }/>
     </div>
   </Router>
 )

examples/todoApp/src/ext/Todo.js

@@ -1,6 +1,7 @@
 // As seen here, we can import npm packages used in code generated by Wasp, which will be clearly defined.
 // In the future, we will of course also be able to specify additional packages as dependencies.
 import React from 'react'
+import { connect } from 'react-redux'
 
 // As seen here, we can import specific components/code generated by Wasp.
 // These will have well defined and documented APIs and paths.
@@ -9,6 +10,8 @@ import React from 'react'
 import Task from '@wasp/entities/task/Task'
 import NewTaskForm from '@wasp/entities/task/components/NewTaskForm'
 import TaskList from '@wasp/entities/task/components/TaskList'
+import * as taskState from '@wasp/entities/task/state.js'
+import * as taskActions from '@wasp/entities/task/actions.js'
 
 const TASK_FILTER_TYPES = Object.freeze({
   ALL: 'all',
@@ -22,7 +25,7 @@ const TASK_FILTERS = Object.freeze({
   [TASK_FILTER_TYPES.COMPLETED]: task => task.isDone
 })
 
-export default class Todo extends React.Component {
+class Todo extends React.Component {
   // TODO: prop types.
 
   state = {
@@ -106,3 +109,11 @@ export default class Todo extends React.Component {
     )
   }
 }
+
+export default connect(state => ({
+  taskList: taskState.selectors.all(state)
+}), {
+  addTask: taskActions.add,
+  updateTask: taskActions.update,
+  removeTask: taskActions.remove
+})(Todo)

examples/todoApp/src/todoApp.wasp

@@ -14,35 +14,8 @@ page Main {
     style: "@ext/Main.css",
     // TODO: We need to make this nicer / more explicit, it is not clear where is this coming from (these props).
     //   Also, this wiring is not elegant.
-    content: {=jsx <>
-        { /* Here we use Todo React component that we imported at the beginning of this file. */ }
-        <Todo
-            addTask={this.props.addTask}
-            taskList={this.props.taskList}
-            updateTask={this.props.updateTask}
-            removeTask={this.props.removeTask}
-        >
-        </Todo>
-        <div className="mainPage__nav">
-            <a href="/about" className="mainPage__nav__aboutLink"> About </a>
-        </div>
-    </> jsx=}
-}
-
-page About {
-    route: "/about",
-    style: {=css
-        .aboutPage { color: black; text-align: center; }
-    css=},
-    content: {=jsx
-        <div className="aboutPage">
-            <h1> About </h1>
-            <p>This page was built with <a href="https://wasp-lang.dev">Wasp</a>!</p>
-            <p> Check out source code &nbsp;
-              <a href="https://github.com/wasp-lang/wasp/tree/master/examples/todoApp">here</a>.
-            </p>
-        </div>
-    jsx=}
+    // Here we use Todo React component that we imported at the beginning of this file.
+    content: {=jsx <Todo/> jsx=}
 }
 
 entity-form<Task> NewTaskForm {