   _nextTodoId: ->
     @todoId += 1
 
-# Semantic actions
+# Registering our semantic actions
 
 actions =
-  addTodo:    (text) -> @dispatch constants.ADD_TODO,    text: text
-  toggleTodo: (id)   -> @dispatch constants.TOGGLE_TODO, id:   id
-  clearTodos:        -> @dispatch constants.CLEAR_TODOS
+  addTodo:    (text) -> @dispatch(constants.ADD_TODO,    text: text)
+  toggleTodo: (id)   -> @dispatch(constants.TOGGLE_TODO, id:   id)
+  clearTodos:        -> @dispatch(constants.CLEAR_TODOS)
 
-# instantiating our stores
+# Instantiating our stores
 
 stores =
   TodoStore: new TodoStore

# Rendering the whole component
document.addEventListener 'DOMContentLoaded', (e) ->
  React.render <Application flux={flux} />,
                document.getElementById 'react_mountPoint'


  # Its style will be determined based on the completion state.
  render: ->
    checkbox = if @props.todo.complete then "fa fa-check-square-o" else "fa fa-square-o"
    <div onClick={@onClick}>
      <i className={checkbox}></i>
      {@props.todo.text}
    </div>

  # Clicking on a todo item will toggle the completion state.
  onClick: ->
