React+Redux如何實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList
小編給大家分享一下React+Redux如何實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的西崗網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
使用Redux做了一個(gè)簡(jiǎn)單的ToDoList待辦事項(xiàng)列表，具體如下
這個(gè)例子也是源于Redux作者Dan Abramov的視頻demo
還要特別說(shuō)明一下
我還沒(méi)有使用react-redux庫(kù)進(jìn)行解耦（可能以后加）
也沒(méi)有拆分成多個(gè)文件等等優(yōu)化
為了單純的練習(xí)redux
適合初步學(xué)習(xí)redux的同學(xué)
本人學(xué)疏才淺，發(fā)現(xiàn)可以優(yōu)化的地方或者問(wèn)題還請(qǐng)大家指正，謝謝
功能樣式
樣子就是這樣的
在輸入框輸入待辦事項(xiàng)
功能很簡(jiǎn)單
鼠標(biāo)點(diǎn)擊Add或者鍵盤按下Enter輸出
ShowAll顯示全部待辦事項(xiàng)
ShowActive顯示未完成的待辦事項(xiàng)（未劃掉的）
ShowCrossed顯示已完成的待辦事項(xiàng)（劃掉的）
配置文件
使用Webpack構(gòu)建的文件夾如下
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的依賴項(xiàng)
{
"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>
腳本文件
沒(méi)有細(xì)拆文件
直接寫在入口文件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(){ //添加待辦事項(xiàng)的listener
let Inp = this.refs.Inp; //獲取真實(shí)DOM的輸入value
if(!Inp.value){ //如果沒(méi)有輸入值，直接返回
return;
}
store.dispatch( //dispatch一個(gè)添加項(xiàng)目的action，并傳入輸入數(shù)據(jù)
{
type: 'ADD_ITEM',
newItem: Inp.value
}
)
Inp.value = ''; //提交后，清空輸入
Inp.focus(); //重置輸入焦點(diǎn)
}
toggleHandler(item){ //Action Creator：負(fù)責(zé)提交切換中劃線的action
store.dispatch(
{
type: 'TOGGLE_ITEM',
changeID: item.ID
}
);
}
showAllHandler(){ //Action Creator：負(fù)責(zé)showAll的action
store.dispatch(
{
type: 'SET_FILTER',
filter: 'SHOW_ALL'
}
);
}
showActiveHandler(){ //Action Creator：負(fù)責(zé)showActive的action
store.dispatch(
{
type: 'SET_FILTER',
filter: 'SHOW_ACTIVE'
}
);
}
showCrossedHandler(){ //Action Creator：負(fù)責(zé)showCrossed的action
store.dispatch(
{
type: 'SET_FILTER',
filter: 'SHOW_CROSSED'
}
);
}
render(){ //渲染結(jié)構(gòu)樣式
let _this = this; //緩存this
let state = store.getState(); //緩存store的快照--state
let {list, option} = state; //解構(gòu)賦值獲取兩個(gè)子state
//list是一個(gè)數(shù)組，內(nèi)部數(shù)組元素是對(duì)象表示每一個(gè)列表項(xiàng)
//option是一個(gè)字符串，表示當(dāng)先選擇的選項(xiàng)
switch(option){ //通過(guò)判斷當(dāng)前的option字符串來(lái)決定是否過(guò)濾list數(shù)組
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"/> //設(shè)置ref屬性為了獲取真實(shí)DOM節(jié)點(diǎn)
<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字符串來(lái)決定三個(gè)選項(xiàng)的樣式
</ul>
<ul className="list">
{
list.map(function(item, index){ //通過(guò)list數(shù)組map映射為虛擬DOM節(jié)點(diǎn)
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, //列表項(xiàng)內(nèi)容
ID: state.length, //列表項(xiàng)ID
del: false //列表項(xiàng)是否已劃掉
}
];
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庫(kù)API-combineReducers()合并reducer
const store = createStore(reducer); //利用redux庫(kù)API-createStore()創(chuàng)建store
const render = () => { //自定義的渲染函數(shù)
ReactDom.render(
<ToDoList/>,
document.getElementById('root')
);
}
store.subscribe(render); //綁定render函數(shù)，每次state更新時(shí)執(zhí)行
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如何實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章題目：React+Redux如何實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList
本文URL：http://chinadenli.net/article30/gidsso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、外貿(mào)建站、定制網(wǎng)站、網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 網(wǎng)站內(nèi)鏈怎么設(shè)置才更合理 2022-09-16
- 網(wǎng)站內(nèi)鏈的重要意義 2022-11-01
- 網(wǎng)站內(nèi)鏈到底有什么用呢？ 2022-12-21
- 網(wǎng)站內(nèi)鏈繪出整體頁(yè)面內(nèi)容脈絡(luò)圖 2023-04-05
- 網(wǎng)站內(nèi)鏈有哪些優(yōu)化技巧？ 2022-09-27
- 什么是網(wǎng)站內(nèi)鏈優(yōu)化 2021-08-10
- 靠譜網(wǎng)站內(nèi)鏈SEO優(yōu)化建立方法 2016-02-07
- 做好網(wǎng)站內(nèi)鏈可以提升網(wǎng)站排名嗎? 2015-06-20
- 如何進(jìn)行網(wǎng)站內(nèi)鏈優(yōu)化？?jī)?nèi)部鏈接優(yōu)化方法是什么？ 2022-08-15
- SEO優(yōu)化之網(wǎng)站內(nèi)鏈的注意事項(xiàng)！ 2014-05-20
- 「文本布局方法」網(wǎng)站內(nèi)鏈錨文本布局方法 2016-08-02
- 如何利用網(wǎng)站內(nèi)鏈引起百度的注意，達(dá)到較好的排名？ 2022-05-23