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} /> <p>{v.title}</p> <p>{v.parc}</p> <img src={v.tp} 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} /> <p>{v.title}</p> <p>{v.parc}</p> <img src={v.tp} /> <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;//--->导出 ### 欢迎大家评论，转载，也希望能一起交流，学习！！！