18.md

React 代办事项列表示例（切换代办事项的完成状态）

对应视频：http://video.sike.io/javascript-redux-react-todo-list-example-toggling-a-todo/

本节使用到的环境：https://jsbin.com/qeligi/edit?js,output

切换 todo 的完成状态

我们已经实现了 todo 里对应 ADD_TODO 动作的功能，接下来应该实现的是对应 TOGGLE_TODO 的功能。

我们可以通过点击 todo 来触发这个切换的动作。

所以我们给每一个 li 都加上 onClick 事件。

class TodoApp extends Component {
  render() {
    return(
      <div>
        {/* <input .../> */}
        {/* <button ...>...</button> */}
        <ul>
          {this.props.todos.map(todo =>
            <li key={todo.id}
                onClick={() => {
                  store.dispatch({
                    type: 'TOGGLE_TODO',
                    id: todo.id
                  });         
                }}
                style={{
                  textDecoration:
                  todo.completed 
                    ? 'line-through'
                    : 'none'
                }}
            >
              {todo.text}
            </li>
          )}
        </ul>
      </div>
    );
  }
}

我们还给完成的 todo 添加了删除线的样式。

总结

我们通过在 li 上绑定 click 事件来分发 TOGGLE_TODO 方法来达到转换 todo 的完成状态的功能。

导航

1. 不可变的单一状态树
2. 用动作描述状态变化
3. 纯函数和非纯函数
4. reducer 函数
5. 为计数器编写一个带有测试的 reducer 函数
6. store 方法：getState，dispatch 和 subscribe
7. 从头实现 store
8. React 计数器示例
9. 使用 slice()，concat() 和 ...(展开运算符) 来避免修改数组
10. 使用 Object.assign() 和 ...(展开运算符) 来避免修改对象
11. 编写代办事项列表的 Reducer （添加一个代办事项）
12. 编写代办事项列表的 Reducer （切换代办事项的完成状态）
13. “Reducer 组合”和数组
14. “Reducer 组合”和对象
15. 使用 combineReducers() 实现 Reducer组合
16. 从头实现 combineReducer()
17. React 代办事项列表示例（添加一个代办事项）
18. React 代办事项列表示例（切换代办事项的完成状态）
19. React 代办事项列表示例（过滤代办事项）
20. 提取展示型组件（ TODO, TODOLIST ）
21. 提取展示型组件（ AddTodo, Footer, FilterLink ）
22. 提取容器组件 ( FILTERLINK ）
23. 提取容器组件 ( VisibleTodoList, AddTodo ）
24. 通过 props 显式地向下传递 store
25. 通过 context 隐式地向下传递 store
26. 使用 React Redux 的 传递 store
27. 使用 React Redux 的 connect() 生成容器 （ VisibleTodoList ）
28. 使用 React Redux 的 connect() 生成容器 （ AddTodo ）
29. 使用 React Redux 的 connect() 生成容器 （ FooterLink ）
30. 提取动作创造器

下一节