基于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 combineReducers 合并上述两个reducers为（reducers/reducer.js)

6. 在 App.js 这个最顶层的UI组件中做页面的整体布局,见下图：
   
   
   可以看到基本的结构由三个组件组成( AddTodo组件, VisibleTodoList组件, Footer组件 ),这三个组件一般都会涉及到数据的交互，所以最后的组件都是通过 react-redux 中api connect 生成的,这使得其内部的UI组件能从外部获取注入其中的属性值

7. 依据这个布局进行各个组件内部细节的UI以及container组件的编写

8. 在所有工作完成后, 在项目目录中运行 npm run start 启动项目，并且在浏览器中输入 http://localhost:8080 查看效果。

---

开发中遇到的一些问题

1. 在组件的编写中当涉及到jsx相关代码的编写时, 一定要 import 进react这个库, 通俗点来说你在这个模块用到的什么就导入什么, 这个不要忘记了, 例如引入react库可以通过代码: import React from 'react'
2. 关于 import 的使用以及 export 的使用问题, 详细的可见 http://es6.ruanyifeng.com/#docs/module
3. 注意 ref 属性的使用
4. 注意 … 扩展运算符的使用
5. 注意 Array.map() 函数的使用以及区分其与 Array.forEach() 之间的区别
6. 注意 Object.assign() 函数的使用