connected TODO to redux to make wasp code cleaner.

examples/todoApp/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/todoApp.wasp

@@ -14,16 +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>
-    jsx=}
+    // Here we use Todo React component that we imported at the beginning of this file.
+    content: {=jsx <Todo/> jsx=}
 }
 
 entity-form<Task> NewTaskForm {