使用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", "descrhtml文件<!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()合并reducerconst store = createStore(reducer); //利用redux庫API-createStore()創建storeconst 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; } } }}==主頁傳送門==
新聞熱點
疑難解答
