购物车页面
import React,{Component, useState} from 'react'
import store from '../../store'
class Ct extends Component{
constructor(){
super()
this.state ={
//组件自身的数据 store.getState() 回去仓库中数据的方法 是方法
name: store.getState().name,
cards: store.getState().cards
}
// store.subscribe() 该方法在仓库数据发生变化时执行
store.subscribe(()=>{
this.setState({
//在仓库数据变化时,更新组件数据
name:store.getState().name,
cards:store.getState().cards
})
})
}
render(){
return(
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>
数量
</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
this.state.cards.map(item =>{
return(
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.price}</td>
<td>
<button onClick={
()=>{this.jian(item)}
}
style={{width:'40px'}}
>-</button>
{item.num}
<button onClick={
()=>{this.handleAdd(item)}
}>+</button>
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
handleAdd=(item) =>{
// 提交动作
store.dispatch({
// 提交的验证
type: 'ADD_TODO',
// 提交的数据
good:item
})
}
jian=(item)=>{
// 提交动作
store.dispatch({
// 提交的验证
type: 'JIAN_TODO',
// 提交的数据
good:item
})
}
}
const Cart = ()=>{
const [gooods,setGooods] =useState([
{id:1,name:'手机',price:2000},
{id:2,name:'笔记本电脑',price:5000},
{id:3,name:'手表',price:12000},
])
function add(item){
store.dispatch({
// 提交的验证
type: 'ADD_TODO',
// 提交的数据
good:item
})
}
return(
<div>
<h2>商品展示页</h2>
<ul>
{
gooods.map(item=>{
return (
<li key={item.id}>
{item.name}
<button onClick={()=>{
add(item)
}}>+</button>
</li>
)
})
}
</ul>
<hr/>
<Ct></Ct>
</div>
)
}
export default Cart
Redux页面
import {createStore} from 'redux'
// 返回新的数据不直接修改
const reducer = (state,action)=>{
// 验证 action.type 提交动作的验证属性type
if(action.type === 'ADD_TODO'){
// 做一个拷贝 因为不能直接修改所以需要拷贝用新的数据去退换旧的数据
// 拷贝要做深拷贝不然新旧数据都会变
// 1. 深拷贝
let newState = JSON.parse(JSON.stringify(state))
// 2 判断当前点击的商品是否存在购物车中
let index = state.cards.findIndex(item=>item.id ===action.good.id)
if(index> -1){
newState.cards[index].num++
}else{
newState.cards.push({
id:action.good.id,
name:action.good.name,
price: action.good.price,
num: 1
})
}
return newState
}else if(action.type ==='JIAN_TODO'){
let newState = Object.assign({},state,{})
console.log(newState)
let index = state.cards.findIndex(item =>item.id ===action.good.id)
if(index > -1){
if(newState.cards[index].num>1){
newState.cards[index].num--
}else{
newState.cards[index].num=1
}
return newState
}
}else {
// 初始化
return {
name: '张三',
cards: [
{id: 1, name: 'Apple', price: 10, num: 1}
]
}
}
}
//创建仓库实例 接受reducer
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store
