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

Posted 2022-02-26 刻刻帝丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React+Redux实现简单的待办事项列表ToDoList相关的知识，希望对你有一定的参考价值。

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/54809630 转载请添加该地址】

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

#功能样式

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

#配置文件
使用Webpack构建的文件夹如下

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的主要内容，如果未能解决你的问题，请参考以下文章

我在这个 React 应用程序中的待办事项列表没有出现

jQuery模仿ToDoList实现简单的待办事项列表

如何使用React删除待办事项列表中的项目

React - 在我的待办事项应用程序中没有调用 mapStateToProps 函数

刷新反应组件或通量/减少中的逻辑？

创建待办事项