基于react-redux开发一个待办事项的demo–todoList的笔记

基于react-redux开发一个待办事项的demo–todoList的笔记

目录结构

开发时的步骤

1. 创建目录结构，包括index.html, entry.js(入口文件), actions(例子中使用到的action), component(UI组件，负责UI呈现), containers(container组件，负责逻辑处理以及数据交互), reducers(dispatch action 到 store 时触发的处理函数)

2. 在index.html中添加基本的结构

3. 编写入口文件entry.js

4. 先分析例子中将会发生或者出发的事情,也就是发出的action,根据分析本例子中将会发生三件事情:
   
   (1)点击 Add todo 按钮添加待办事项（查看actions/addTodo.js）
   
   (2)点击 todoList 中的待办事项，切换待办事项的状态为完成还是待完成（查看actions/toggleTodo.js）
   
   (3)设置过滤器，从而在事项列表中呈现对应的事项（查看actions/setVisibility.js）

5. 编写reducer函数，包括addTodo以及ToggleTodo发生时的处理(reducers/todo.js) 以及 setVisibility发生时的处理 (reducers/visibilityFilter.js) , 最后通过redux提供的合并reducer的api