基于react-redux开发一个待办事项的demo–todoList的笔记
基于react-redux开发一个待办事项的demo–todoList的笔记
目录结构
开发时的步骤
创建目录结构，包括index.html, entry.js(入口文件), actions(例子中使用到的action), component(UI组件，负责UI呈现), containers(container组件，负责逻辑处理以及数据交互), reducers(dispatch action 到 store 时触发的处理函数)
在index.html中添加基本的结构
编写入口文件entry.js
先分析例子中将会发生或者出发的事情,也就是发出的action,根据分析本例子中将会发生三件事情:
(1)点击 Add todo 按钮添加待办事项（查看actions/addTodo.js）
(2)点击 todoList 中的待办事项，切换待办事项的状态为完成还是待完成（查看actions/toggleTodo.js）
(3)设置过滤器，从而在事项列表中呈现对应的事项（查看actions/setVisibility.js）
编写reducer函数，包括addTodo以及ToggleTodo发生时的处理(reducers/todo.js) 以及 setVisibility发生时的处理 (reducers/visibilityFilter.js) , 最后通过redux提供的合并reducer的api combineReducers 合并上述两个reducers为（reducers/reducer.js)
在 App.js 这个最顶层的UI组件中做页面的整体布局,见下图：
可以看到基本的结构由三个组件组成( AddTodo组件, VisibleTodoList组件, Footer组件 ),这三个组件一般都会涉及到数据的交互，所以最后的组件都是通过 react-redux 中api connect 生成的,这使得其内部的UI组件能从外部获取注入其中的属性值依据这个布局进行各个组件内部细节的UI以及container组件的编写
在所有工作完成后, 在项目目录中运行 npm run start 启动项目，并且在浏览器中输入 http://localhost:8080 查看效果。
开发中遇到的一些问题
- 在组件的编写中当涉及到jsx相关代码的编写时, 一定要 import 进react这个库, 通俗点来说你在这个模块用到的什么就导入什么, 这个不要忘记了, 例如引入react库可以通过代码:
import React from 'react' - 关于 import 的使用以及 export 的使用问题, 详细的可见 http://es6.ruanyifeng.com/#docs/module
- 注意 ref 属性的使用
- 注意 … 扩展运算符的使用
- 注意 Array.map() 函数的使用以及区分其与 Array.forEach() 之间的区别
- 注意 Object.assign() 函数的使用
以上是 基于react-redux开发一个待办事项的demo–todoList的笔记 的全部内容， 来源链接： utcz.com/z/382910.html
