Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Deep Linking with React + Flux, main controller view, step 1
TasksApp = React.createClass({
// all component state originates from TaskStore, upstream
getInitialState: function() {
return {
selectedTask: TaskStore.selectedTask(),
tasks: TaskStore.tasks(),
};
},
// and when the TaskStore's state changes, we update this component's
// state by copying the TaskStore's state
componentWillMount: function() {
TaskStore.addChangeListener(this.updateState);
},
componentWillUnmount: function() {
TaskStore.removeChangeListener(this.updateState);
},
updateState: function() {
this.setState({
selectedTask: TaskStore.selectedTask(),
tasks: TaskStore.tasks(),
});
},
// draw a list of tasks, and, if we have selected a task, the details for
// that task
render: function() {
return (
<div>
<ul id="tasks" className="left-pane">
{this.renderTaskListItems()}
</ul>
{this.renderTodoDetailPane()}
</div>
);
},
renderTaskListItems: function() {
return this.state.tasks.map(function(task) {
return (
<li key={task.id}>
<a href={"/tasks/" + task.id}>{task.title}</a>
</li>
);
});
},
renderTodoDetailPane: function() {
if (this.state.selectedTask) {
//without a key prop, React DOM diffing won't catch when we change selectedTask
return (<TaskDetail className="right-pane" key={task.id} task={task} />);
}
},
});
TaskDetail = React.createClass({
render: function() {
// left as an exercise
return (<div></div>);
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.