React+Redux实现简单的待办事项列表ToDoList

使用Redux做了一个简单的ToDoList待办事项列表

这个例子也是源于Redux作者Dan Abramov的视频demo
还要特别说明一下
我还没有使用react-redux库进行解耦（可能以后加）
也没有拆分成多个文件等等优化
为了单纯的练习redux
适合初步学习redux的同学
本人学疏才浅，发现可以优化的地方或者问题还请大家指正，谢谢

功能样式

React+Redux实现简单的待办事项列表ToDoList

样子就是这样的
在输入框输入待办事项
功能很简单
鼠标点击Add或者键盘按下Enter输出
ShowAll显示全部待办事项
ShowActive显示未完成的待办事项（未划掉的）
ShowCrossed显示已完成的待办事项（划掉的）

配置文件

使用Webpack构建的文件夹如下

React+Redux实现简单的待办事项列表ToDoList

webpack.config.js配置文件

module.exports = {
 entry: {
 index: './src/js/entry.js'
 },output: {
 path: './static/dist/',publicPath: 'http://localhost:8080/static/dist/',filename: '[name].js'
 },module: {
 loaders: [
  {
  test: /\.js$/,loader: 'babel',exclude:/node_modules/,query: {
   presets: ['react','es2015']
  }
  },{
  test: /.less$/,loader: 'style!css!less'
  }
 ]
 }
}

package.json的依赖项

{
 "name": "react-demo","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {
 "test": "echo \"Error: no test specified\" && exit 1","diy": "webpack-dev-server --progress --colors --devtool sourcemap"
 },"author": "Payson","license": "ISC","devDependencies": {
 "babel-core": "^6.22.1","babel-loader": "^6.2.10","babel-preset-es2015": "^6.22.0","babel-preset-react": "^6.22.0","css-loader": "^0.26.1","jquery": "^3.1.1","less": "^2.7.2","less-loader": "^2.2.3","react": "^15.4.2","react-dom": "^15.4.2","react-redux": "^5.0.2","redux": "^3.6.0","style-loader": "^0.13.1","webpack": "^1.14.0","webpack-dev-server": "^1.16.2"
 }
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>React</title>
</head>
<body>
 <div id="root"></div>
 <script src="http://localhost:8080/static/dist/index.js"></script>
</body>
</html>

脚本文件

没有细拆文件
直接写在入口文件entry.js了
注释就写在代码里了

require('../less/index.less'); //行间样式受限制不能添加伪类伪元素，所以还是添加了less(css)控制样式
import React from 'react';
import {Component} from 'react'
import ReactDom from 'react-dom';
import {createStore,combineReducers} from 'redux';

class ToDoList extends Component {
 addHandler(){ //添加待办事项的listener
 let Inp = this.refs.Inp; //获取真实DOM的输入value
 if(!Inp.value){ //如果没有输入值，直接返回
 return;
 }
 store.dispatch( //dispatch一个添加项目的action，并传入输入数据
 {
 type: 'ADD_ITEM',newItem: Inp.value
 }
 )
 Inp.value = ''; //提交后，清空输入
 Inp.focus(); //重置输入焦点
 }
 toggleHandler(item){ //Action Creator：负责提交切换中划线的action
 store.dispatch(
 {
 type: 'TOGGLE_ITEM',changeID: item.ID
 }
 );
 }
 showAllHandler(){ //Action Creator：负责showAll的action
 store.dispatch(
 {
 type: 'SET_FILTER',filter: 'SHOW_ALL'
 }
 );
 }
 showActiveHandler(){ //Action Creator：负责showActive的action
 store.dispatch(
 {
 type: 'SET_FILTER',filter: 'SHOW_ACTIVE'
 }
 );
 }
 showCrossedHandler(){ //Action Creator：负责showCrossed的action
 store.dispatch(
 {
 type: 'SET_FILTER',filter: 'SHOW_CROSSED'
 }
 );
 }
 render(){ //渲染结构样式
 let _this = this; //缓存this
 let state = store.getState(); //缓存store的快照--state
 let {list,option} = state; //解构赋值获取两个子state
 //list是一个数组，内部数组元素是对象表示每一个列表项
 //option是一个字符串，表示当先选择的选项
 switch(option){ //通过判断当前的option字符串来决定是否过滤list数组
 case 'SHOW_ACTIVE':
 list = list.filter(function(item){
  return !item.del;
 });
 break;
 case 'SHOW_CROSSED':
 list = list.filter(function(item){
  return item.del;
 });
 break;
 }
 document.body.addEventListener('keydown',function(e){
 if(e.which == 13){
 _this.addHandler();
 }
 }); //绑定键盘enter事件
 return (
 <div>
 <input type="text" ref="Inp"/> //设置ref属性为了获取真实DOM节点
 <button onClick={_this.addHandler.bind(_this)}>Add</button>
 <ul className="option">
  <li onClick={_this.showAllHandler.bind(_this)}>
  <span style={{textDecoration: option!='SHOW_ALL' ? 'underline' : 'none'}}>ShowAll</span>
  </li>
  <li onClick={_this.showActiveHandler.bind(_this)}>
  <span style={{textDecoration: option!='SHOW_ACTIVE' ? 'underline' : 'none'}}>ShowActive</span>
  </li>
  <li onClick={_this.showCrossedHandler.bind(_this)}>
  <span style={{textDecoration: option!='SHOW_CROSSED' ? 'underline' : 'none'}}>ShowCrossed</span>
  </li> //判断option字符串来决定三个选项的样式
 </ul>
 <ul className="list">
  {
  list.map(function(item,index){ //通过list数组map映射为虚拟DOM节点
  return <li key={index}>
   <span style={{textDecoration: item.del ? 'line-through': 'none'}}
   onClick={_this.toggleHandler.bind(_this,item)}>{item.item}</span>
   </li>
  })
  }
 </ul>
 </div>
 )
 }
}
const list = (state = [],action) => { //list-reducer
 switch(action.type){
 case 'ADD_ITEM':
 return [
 ...state,{
  item: action.newItem,//列表项内容
  ID: state.length,//列表项ID
  del: false //列表项是否已划掉
 }
 ];
 case 'TOGGLE_ITEM':
 return state.map((item)=>{
 return Object.assign({},item,{
  del: action.changeID == item.ID ? !item.del : item.del
 });
 });
 default:
 return state;
 }
}
const option = (state = 'SHOW_ALL',action) => { //option-reducer
 switch(action.type){
 case 'SET_FILTER':
 return action.filter;
 default:
 return state;
 }
}
const reducer = combineReducers({list,option}); //利用redux库API-combineReducers()合并reducer
const store = createStore(reducer); //利用redux库API-createStore()创建store
const render = () => { //自定义的渲染函数
 ReactDom.render(
 <ToDoList/>,document.getElementById('root')
 );
}
store.subscribe(render); //绑定render函数，每次state更新时执行
render(); //首次渲染

样式文件

index.less文件加一些样式控制

.option {
 list-style-type: none;
 padding: 0;
 margin-top: 5px;
 font-size: 13px;
 li {
 float: left;
 margin-right: 15px;
 span {
  cursor: pointer;
  font-weight: bold;
 }
 }
 &::after {
 content: '';
 display: block;
 clear: both;
 }
}
.list {
 li {
 span {
  &:hover {
  color: #f40;
  cursor: pointer;
  }
  &::selection {
  color: #000;
  background-color: #fff;
  }
 }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

React+Redux实现简单的待办事项列表ToDoList

相关推荐