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;//--->导出

### 欢迎大家评论,转载,也希望能一起交流,学习!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容