react做的react-redux购物车
### 1. 创建项目
create - react - app 项目名（shop）
### 2. 进入项目，下载redux，react-redux
cnpm install redux react - redux --save
### 3. 创建几个文件夹
App ----->App.js App.css
cart------>cart.js
list------->list.js
store---->store.js
reducer-->reducer.js
### 4 . 创建仓库，reducer.js文件，在App.js文件中引入组件，在到index.js文件中引入模块
import {Provider} from "react-redux";
import store from "./store/store";
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
### 5. 写一个ax . json文件
{
"list": [
{"id":0,"img": "/1.png","title": "联想电脑","parc": 2000,"tp": "/aa.png"},
{"id":1,"img": "/2.png","title": "锤子电脑","parc": 3000,"tp": "/aa.png"},
{"id":2,"img": "/3.png","title": "华硕电脑","parc": 4000,"tp": "/aa.png"},
{"id":3,"img": "/4.png","title": "卧槽电脑","parc": 5000,"tp": "/aa.png"}
]
}
### 6. 在list.js中
import React, {Component} from 'react';//--->引入react模块
import {connect} from 'react-redux';//--->引入react-redux模块
import axios from "axios";//--->引入axios
class List extends Component {
constructor(props) {
super(props);
this.state={//--->创建一个初始化状态
list:[]
}
}
componentDidMount() {
var that=this;//--->改变this的指向
axios.get("/ax.json").then(function (ret) {//--->从json文件中读取数据
console.log(ret);
that.setState({list:ret.data.list});//--->使json数据添加到list中保存
}).catch(function (msg) {//--->获取失败，输出数据
console.log(msg)
})
}
add(v){//--->添加 v 是每一项的内容
this.props.add1(v);
//alert("qq")
}
render() {
return (
<div>
<ul>
{
this.state.list.map((v,i)=>{
return <li key={i}>
<p>{v.id}</p>
<img src={v.img} alt=""/>
<p>{v.title}</p>
<p>{v.parc}</p>
<img src={v.tp} alt="" onClick={this.add.bind(this,v)}/>
</li>
})
}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
return {};
}
function mapDispatchToProps(dispatch) {
return {
add1(v){//--->从上面的添加方法中把 v 每一项的数据传递过来 ，在传递到reducer.js页面对仓库操作
console.log(v);
dispatch({type:"add",data:{t:v}});
}
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(List);
### 6. 在cart.js中
import React, {Component} from 'react';
import {connect} from 'react-redux';
import "./cart.css"
class Cart extends Component {
constructor(props) {
super(props);
this.state={
ae:false//--->定义一个状态，用来做三目运算符的判断
}
}
dj(n){//--->点击多选
this.props.dj1(n);
}
jia(n){//--->点击加+按钮
this.props.jia1(n);
}
jian(n){//--->点击减 — 按钮
this.props.jian1(n);
}
djj(){//--->点击 全选多选框
this.props.djj1();
}
xj(){//--->小计
var list=this.props.cart;
var s=0;
list.forEach((v,i)=>{
if(v.show){
s+=v.parc*v.num;
}
})
return s
}
del(){//--->选中删除
this.props.del1();
}
bj(){//--->编辑----》多选框隐藏，显示
this.setState({ae:!this.state.ae})
}
render() {
return (
<div>
<ul>
{
this.props.cart.map((v,i)=>{
return <li key={i}>
<button onClick={this.bj.bind(this)}> 编辑 </button>
<p>{v.id}</p>
<span className={v.show?"ac":""}
onClick={this.dj.bind(this,i)}
style={{display:this.state.ae?"inline-block":"none"}}></span>
<img src={v.img} alt=""/>
<p>{v.title}</p>
<p>{v.parc}</p>
<img src={v.tp} alt=""/>
<p>
<input type="button" value="+"
onClick={this.jia.bind(this,i)}/>
<input type="text" value={v.num}
style={{width:"40px"}}/>
<input type="button" value="-"
onClick={this.jian.bind(this,i)}/>
</p>
</li>
})
}
</ul>
<p><span className={this.props.c?"ac":""}
onClick={this.djj.bind(this)}></span>全选
<b>小计：{this.xj()}</b>
<button onClick={this.del.bind(this)}>选中删除</button>
</p>
</div>
);
}
}
function mapStateToProps(state) {
return {
cart:state.arr,//--->从仓库中获取list.js中的添加事件
c:state.c//--->从仓库中获取全选的状态
};
}
function mapDispatchToProps(dispatch) {
return {
dj1(n){//--->点击多选框
dispatch({type:"dj",da:{t:n}});
},
jia1(n){//--->加按钮+
dispatch({type:"jia",da:{t:n}});
},
jian1(n){//--->减按钮-
dispatch({type:"jian",da:{t:n}});
},
djj1(){//--->全选
// console.log(n)
dispatch({type:"djj"});
},
del1(){//---->选中删除
dispatch({type:"del"});
}
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Cart);
### cart.css 样式
span{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #ccc;
}
.ac{
background: url("/6.png") no-repeat;
background-size: 40px 40px;
}
### 7. 在 reducer.js 中
var s={
arr:[],
c:false//--->定义全选的状态
};
function reducer(state=s,action) {
switch (action.type) {
case "add"://---> 添加
console.log(action.data.t);
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
// var item={
// t:action.data.t,
// show:false
// }//--->这样写也可以
var item = action.data.t;
item.show=false;//---->这样写也可以
var index;
var f=s1.arr.some((v,i)=>{//some方法 ， 也可用findIndex方法
if(v.id==item.id){//--->如果已经加入了一件商品，在点相同的商品添加时，
index=i;//--->让他们的下标，索引值相等
}
return v.id==item.id;
})
if(f){//--->f true ===》findIndex -1
s1.arr[index].num++ //--->数量在原有的基础上加1
}else{//--->f false
item.num=1;//--->每次添加一件新的商品，就让他的数量为1
s1.arr.push(item);
}
return s1;
case "dj"://--->多选框
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
s1.arr[action.da.t].show=!s1.arr[action.da.t].show;//--->取反值
var aa=s1.arr.every((v,i)=>{//--->当选中所有的多选框时，全选的多选框也被选中
return v.show//-->只有当所有的多选框被选中时，条件满足返回---true
})
console.log(aa);
s1.c=aa;//--->让全选的状态为true
return s1;
case "jia"://--->加按钮 +
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
s1.arr[action.da.t].num++;
return s1;
case "jian"://--->减按钮 -
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
var ff=s1.arr[action.da.t].num--;
if(ff<=1){//--->如果减到小于当前最小数量1时
alert("111");
s1.arr[action.da.t].num=1;//--->让数量为1， 最少为1件
}
return s1;
case "djj"://--->全选
// console.log(action.da.t.n)
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
s1.c=!s1.c;//--->取反值
s1.arr.forEach((v,i)=>{
v.show=s1.c;//---> 让多选框的状态等于全选的状态 ，全选为true，多选为true
})
return s1;
case "del"://--->选中删除
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
var l = s1.arr.filter((v,i)=>{//--->过滤的方法
return !v.show //--->返回非选中的数据
});
s1.arr=l;//--->让整体的数据等于当前 的非选中数据
s1.c=false;
return s1;
default:
return state;
}
}
export default reducer;
### 8. 在 store.js 中
import {createStore} from "redux";//--->引入redux模块
import reducer from "../reducer/reducer";//--->引入reducer.js文件
var store=createStore(reducer);//--->创建仓库
export default store;//--->导出
### 欢迎大家评论，转载，也希望能一起交流，学习！！！
