diff --git a/examples/todoApp/ext/Todo.js b/examples/todoApp/ext/Todo.js
index 26fc13384..ac1ada5ba 100644
--- a/examples/todoApp/ext/Todo.js
+++ b/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)
diff --git a/examples/todoApp/todoApp.wasp b/examples/todoApp/todoApp.wasp
index 963b0ca0a..bc0d4b286 100644
--- a/examples/todoApp/todoApp.wasp
+++ b/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. */ }
-
-
- jsx=}
+ // Here we use Todo React component that we imported at the beginning of this file.
+ content: {=jsx jsx=}
}
entity-form NewTaskForm {