Created
July 3, 2017 19:18
-
-
Save ncweinhold/5a0dac20bd6fb66c038e35f0a4fba817 to your computer and use it in GitHub Desktop.
Simple react + redux code for a todo app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { | |
createStore, | |
bindActionCreators | |
} = Redux; | |
const { | |
Provider, | |
connect | |
} = ReactRedux; | |
const { | |
render | |
} = ReactDOM; | |
let nextTodoId = 4 | |
const task_list = [ | |
{id: 1, title: "First task", description: "Build the todo list application"}, | |
{id: 2, title: "Second task", description: "Apply for VC funding"}, | |
{id: 3, title: "Final task", description: "Spend the VC money on beer and pizza"}, | |
]; | |
class App extends React.Component { | |
render() { | |
return ( | |
<div id="mainContainer"> | |
<h2>Todo App</h2> | |
<TodoList title="My First Todo List New" todos={this.props.todos} /> | |
<TodoListForm addTodo={this.props.addTodo} /> | |
</div> | |
) | |
} | |
} | |
const AppContainer = connect( | |
function mapStateToProps(state) { | |
return { | |
todos: state | |
}; | |
}, | |
function mapDispatchToProps(dispatch) { | |
return bindActionCreators(actions, dispatch); | |
} | |
)(App); | |
const actions = { | |
addTodo: (title, description) => { | |
return { | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
title, | |
description | |
} | |
} | |
} | |
const reducer = (state = [], action) => { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [ | |
...state, | |
{ | |
id: action.id, | |
title: action.title, | |
description: action.description | |
}, | |
] | |
default: | |
return state | |
} | |
} | |
const Todo = ({ title: title, description: description}) => ( | |
<div> | |
<h5>{title}</h5> | |
<p>{description}</p> | |
</div> | |
) | |
class TodoListForm extends React.Component { | |
componentDidMount() { | |
//this.refs.title.focus() | |
} | |
_handleSubmit(e) { | |
e.preventDefault(); | |
const { title, description } = this.refs; | |
this.props.addTodo(title.value, description.value) | |
this.refs.createTodo.reset(); | |
} | |
render() { | |
return( | |
<div id="createTodoFormContainer"> | |
<h3>Add a new task</h3> | |
<form id="createTodoForm" ref="createTodo" onSubmit={::this._handleSubmit}> | |
<input type="text" ref="title" title="title" id="title" /> | |
<input type="text" ref="description" title="description" id="description" /> | |
<button type="submit">Create task</button> | |
</form> | |
</div> | |
) | |
} | |
} | |
class TodoList extends React.Component { | |
render() { | |
const { title, todos } = this.props | |
return ( | |
<div id="todoList"> | |
<h3>{title}</h3> | |
<ul> | |
{todos.map(todo => | |
<Todo | |
title={todo.title} | |
description={todo.description} /> | |
) | |
} | |
</ul> | |
</div> | |
) | |
} | |
} | |
const store = createStore(reducer, task_list) | |
ReactDOM.render( | |
<Provider store={store}> | |
<AppContainer /> | |
</Provider>, | |
document.getElementById('root') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment