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

react

基于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() 函数的使用

以上是 基于react-redux开发一个待办事项的demo–todoList的笔记 的全部内容, 来源链接: utcz.com/z/382910.html

回到顶部