wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-12-25 10:03:07 +03:00
Code Issues Projects Releases Wiki Activity

connected TODO to redux to make wasp code cleaner.

Browse Source
This commit is contained in:
Matija Sosic 2020-02-14 12:30:16 +01:00
parent cb9bbacc4f
commit 56e9bc6b0a
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
examples/todoApp/ext/Todo.js
View File

@ -1,6 +1,7 @@
// As seen here, we can import npm packages used in code generated by Wasp, which will be clearly defined. // 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. // In the future, we will of course also be able to specify additional packages as dependencies.
import React from 'react' import React from 'react'
import { connect } from 'react-redux'
// As seen here, we can import specific components/code generated by Wasp. // As seen here, we can import specific components/code generated by Wasp.
// These will have well defined and documented APIs and paths. // 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 Task from '@wasp/entities/task/Task'
import NewTaskForm from '@wasp/entities/task/components/NewTaskForm' import NewTaskForm from '@wasp/entities/task/components/NewTaskForm'
import TaskList from '@wasp/entities/task/components/TaskList' 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({ const TASK_FILTER_TYPES = Object.freeze({
ALL: 'all', ALL: 'all',
@ -22,7 +25,7 @@ const TASK_FILTERS = Object.freeze({
[TASK_FILTER_TYPES.COMPLETED]: task => task.isDone [TASK_FILTER_TYPES.COMPLETED]: task => task.isDone
}) })
export default class Todo extends React.Component { class Todo extends React.Component {
// TODO: prop types. // TODO: prop types.
state = { 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)

12
examples/todoApp/todoApp.wasp
View File

@ -14,16 +14,8 @@ page Main {
style: "@ext/Main.css", style: "@ext/Main.css",
// TODO: We need to make this nicer / more explicit, it is not clear where is this coming from (these props). // 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. // Also, this wiring is not elegant.
content: {=jsx // Here we use Todo React component that we imported at the beginning of this file.
{ /* Here we use Todo React component that we imported at the beginning of this file. */ } content: {=jsx <Todo/> jsx=}
<Todo
addTask={this.props.addTask}
taskList={this.props.taskList}
updateTask={this.props.updateTask}
removeTask={this.props.removeTask}
>
</Todo>
jsx=}
} }
entity-form<Task> NewTaskForm { entity-form<Task> NewTaskForm {