react用redux 作的todolist

### 1. 建立項目 

create - react - app  項目名（shop）

### 2. 進入項目，下載redux 

cnpm install redux  --save 

### 3. 在src中建立幾個文件夾

App ----->App.css       App.js    

store------>store.js  

todo----->to.js  

reducer------>reducer.js  

list ---->list.js   

### 4. 在todo.js中 

import React, {Component} from 'react';
import store from "../store/store";
class Todo extends Component {
 constructor(props) {
 super(props);

 this.state={
 tt:""//--->初始化一個狀態 
 }
 }
 ch(e){//--->input,onChange事件
 this.setState({tt:e.target.value});
 }
 add(){//--->添加事件
 store.dispatch({type:"add",d:{t:this.state.tt}});//--->將數據派發到reducer.js頁面中操做
 this.setState({tt:""})//--->當前的input框中的數據值爲空
 }

 render() {
 return (
 <div>
 <input type="text" value={this.state.tt} onChange={this.ch.bind(this)}/>
 <input type="button" onClick={this.add.bind(this)} value="添加"/>
 </div>
 );
 }
}

export default Todo;

### 5. 在list.js 中

import React, {Component} from 'react';
import store from "../store/store"
class List extends Component {
 constructor(props) {
 super(props);
 var s1=store.getState();//--->獲取倉庫數據
 this.gets=this.gets.bind(this);//--->改變this指向 
 store.subscribe(this.gets);//--->設置監聽，再次更新數據
 this.state={
 list:s1.arr
 }
 }
 gets(){
 var s=store.getState();//--->獲取倉庫數據 
 this.setState({list:s.arr});//--->更新當前數據 
 }

 del(n){//--->刪除事件 --->派發到reducer.js中進行操做
 store.dispatch({type:"del",data:{i:n}})
 }
 ck(n){//--->多選框事件 
 store.dispatch({type:"ck",data:{i:n}});
 }
 finished(){//--->數量事件 
 var list=this.state.list;
 var s=0;
 list.forEach((v,i)=>{
 if(v.done){//--->若是多選框被選中了，執行s++,不然不會執行
 s++;
 }
 })
 return s;
 }
 qh(n){//--->點擊添加的文本，input顯示，該文本隱藏 
 store.dispatch({type:"qh",data:{i:n}});
 }
 ob(n){//--->點擊input框，文本顯示，該input框隱藏 
 store.dispatch({type:"ob",data:{i:n}});
 }
 chh(n,e){//--->在input框中修改文本數據 
 store.dispatch({type:"chh",data:{i:n,c:e}});
 }
 render() {
 return (
 <div>
 <h2>已完成{this.state.list.length-this.finished()}</h2>
 <ul>
 {
 this.state.list.map((v,i)=>{
 if(!v.done){
 return <li key={i}>
 <input type="checkbox" defaultChecked={v.done}
 onClick={this.ck.bind(this,i)}/>
 <span style={{display:v.show?"inline-block":"none"}}
 onClick={this.qh.bind(this,i)}>{v.title}</span>
 <input type="text" style={{display:!v.show?"inline-block":"none"}}
 onBlur={this.ob.bind(this,i)} value={v.title}
 onChange={this.chh.bind(this,i)}/>
 <input type="button" value="刪除" onClick={this.del.bind(this,i)}/>
 </li>
 }
 })
 }
 </ul>
 <h2>未完成{this.finished()}</h2>
 <ul>
 {
 this.state.list.map((v,i)=>{
 if(v.done){
 return <li key={i}>
 <input type="checkbox" defaultChecked={v.done}
 onClick={this.ck.bind(this,i)}/>
 {v.title}
 <input type="button" value="刪除" onClick={this.del.bind(this,i)}/>
 </li>
 }
 })
 }
 </ul>
 </div>
 );
 }
}

export default List;

### 6. 在reducer.js中 

也可在該頁面中加入本地儲存

var s={//--->定義一個初始值 
 t:"",
 arr:[]
}
function reducer(start=s,action){
 switch (action.type) {
 case "add"://--->添加事件 
 var s1=JSON.parse(JSON.stringify(start));//--->深度複製
 var item={
 title:action.d.t,
 done:false,
 show:true
 }
 s1.arr.push(item);
 return s1;

 case "del"://--->刪除事件 
 var s1=JSON.parse(JSON.stringify(start));//--->深度複製
 s1.arr.splice(action.data.i,1);
 return s1;

 case "ck"://--->多選框事件 
 var s1=JSON.parse(JSON.stringify(start));//--->深度複製
 s1.arr[action.data.i].done=!s1.arr[action.data.i].done;
 return s1;


 case "qh"://--->點擊添加的文本隱藏事件，input框顯示
 var s1=JSON.parse(JSON.stringify(start));//--->深度複製
 s1.arr[action.data.i].show=!s1.arr[action.data.i].show;
 return s1;

 case "ob"://--->點擊input框隱藏事件，文本顯示
 var s1=JSON.parse(JSON.stringify(start));//--->深度複製
 s1.arr[action.data.i].show=!s1.arr[action.data.i].show;
 return s1;

 case "chh"://--->在input框中修改文本事件
 var s1=JSON.parse(JSON.stringify(start));//--->深度複製
 s1.arr[action.data.i].title=action.data.c.target.value;
 return s1;

 default:
 return start;
 }
}
export default reducer;

### 7. 在store.js中  

import {createStore} from "redux";//--->引入redux模塊
import reducer from "./reducer/reducer";//--->引入reducer.js文件
var store=createStore(reducer);//--->建立倉庫 
export default store;//--->導出


###歡迎你們評論， 若有不足請指正， 能夠一塊兒交流，學習，一塊兒進步 ！！！！