标签：arr todolist s1 reducer react var redux data store
### 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;//--->导出
###欢迎大家评论， 如有不足请指正， 可以一起交流，学习，一起进步 ！！！！
标签：arr,todolist,s1,reducer,react,var,redux,data,store 来源： https://www.cnblogs.com/zhangMr/p/11845104.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。