React+Redux实现简单的待办事项列表ToDoList
使用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用Redux中央仓库实现一个todolist的具体代码,供大家参考,具体内容如下 Redux简单介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具.随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的.(Redux支持React,Angular.jQuery甚至纯JavaScript) Redux Dev Tools插件 Redux调试工
-
用React实现一个完整的TodoList的示例代码
前言:算起来已经有一个多月没有写博客了,近来懈怠了不少,也不知道要写些什么,最近学了一段时间的React,一直都在看些理论性的知识,总觉得应该写个什么来练练手,所以还是拿个简单的todoList来举个例子吧! 一. 首先根据效果图讲一下要实现的功能吧 todoList最终效果图 (1)可以添加任务: (2)已完成任务以及未完成任务的颜色区分开: (3)进行添加任务,修改任务状态,以及删除任务时,下面的任务完成数目和任务总数要进行变化: 以上就是要实现的功能. 二. 接下来该如何设计呢? (1)任
-
react+redux的升级版todoList的实现
又是很久不写博客了,最近在用蚂蚁金服的ant-design-pro写毕设,写着写着写不下去了,很多东西都不理解,不得不说大神写出来的东西都是需要花学习成本的,或者底子好,对于React新手来说就有点难了.所以就老老实实的认真看了下Redux到底如何使用,在这里推荐一下自己最近在看的书,写的算是比较详细的:<深入React技术栈>.废话不多说,今天就分享下自己如何使用redux来实现一个todoList的,希望对想要用redux的你会有所帮助. (为什么叫升级版呢?因为之前写过一个没有用redu
-
React-redux实现小案例（todolist）的过程
使用React-redux实现,待办事项todolist案例. 注:以下列出主要页面代码,为说明React-redux实现的过程,所以并没有将案例的完整代码展示! 一.全局安装:rudux.react-redux npm install redux --save npm install react-redux 二.主要代码: 1.项目的入口文件index.js import React from 'react'; import ReactDOM from 'react-dom'; import
-
React+Redux实现简单的待办事项列表ToDoList
使用Redux做了一个简单的ToDoList待办事项列表 这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下 我还没有使用react-redux库进行解耦(可能以后加) 也没有拆分成多个文件等等优化 为了单纯的练习redux 适合初步学习redux的同学 本人学疏才浅,发现可以优化的地方或者问题还请大家指正,谢谢 功能样式 样子就是这样的 在输入框输入待办事项 功能很简单 鼠标点击Add或者键盘按下Enter输出 ShowAll显示全部待办事项 ShowActi
-
jQuery模仿ToDoList实现简单的待办事项列表
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项.待办事项的数据是保存到本地存储的(localStorage),就算关闭页面再打开,数据还是存在的(前提是要用相同浏览器). ToDoList链接: ToDoList-最简单的待办事项列表 先把css样式以及js文件引入进来,jQuery文件要写在你自己的js文件上边 <link rel="stylesheet" href=
-
使用JavaScript制作待办事项列表的示例代码
目录 JavaScript待办事项列表 如何制作JavaScript待办事项列表 第 1 步: 项目的基本结构 第 2 步: 使用 HTML 创建一个输入位置 第 3 步: 制作查看 Todo 文本的列表 第 4 步: 使用 JavaScript 激活待办事项列表 JavaScript 解释 JavaScript待办事项列表 我在此处展示了有关如何使用 JavaScript创建待办事项列表 HTML 的完整信息和教程.我借助HTML 和 CSS来设计它.在 JavaScript 的帮助下实现.
-
简单介绍react redux的中间件的使用
用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增删改查操作的一种框架,它不仅仅适用于react,也使用于其他前端框架.研究过redux源码的人都觉得该源码很精妙,而本博文就针对redux中对中间件的处理进行介绍. 在讲redux中间件之前,先用两张图来大致介绍一下redux的基本原理: 图中就是redux的基本流程,这里就不细说. 一般在react中不仅仅利用redux,还利用到react-redux: react-redux这里也不细说.
-
Vuex模块化实现待办事项的状态管理
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍 待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常
-
React/Redux应用使用Async/Await的方法
Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await .虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了. 现在假设一个简单的React/Redux应用,我将引入 Async/Await 到其代码. Actions 此例子中有一个创建新文章的 Action ,传统方法是利用 Prom
-
react redux入门示例
环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来. npm run eject 安装redux npm i redux --save 简单理解 redux简单用法就是通过它的store来订阅和发布信息. 通过subscribe来订阅action,通过dispatch来触发action.reducer中定义来各个action要做的事情. dem
-
基于React+Redux的SSR实现方法
为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用 Redux 的简单的 React 应用程序,实现服务端渲染(SSR).该示例包括异步数据抓取,这使得任务变得更有趣. 如果您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr 安装环境 在开始编写应用之前,需要我们先把环境编译/打包环境
-
react+ts实现简单jira项目的最佳实践记录
练手的一套项目 react+ts 虽然内容较少,但是干货挺多,尤其是对hooks的封装,ts的泛型的理解,使用更上一层楼 项目代码:https://gitee.com/fine509/react_jiar 效果图 这是三个主要页面,还有一些小细节 等等 一些值得注意的地方(只是讲大概的功能,没有具体的详解怎么用) 使用错误边界处理,getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉. useSearchParams的使用 这个api可以获取
-
react+redux仿微信聊天界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室--reactChatRoom,实现了聊天记录下拉刷新.发送消息.表情(动图),图片.视频预览,打赏.红包等功能. 二.技术栈MVVM框架: react / react-dom状态管理:redux / react-redux页面路由:react-router-dom弹窗插件