### 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;//--->导出
###欢迎大家评论， 如有不足请指正， 可以一起交流，学习，一起进步 ！！！！
网友评论