1,环境我不搭建了,直接写!
App.js
import React , {Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import * as actions from "./actions.js";
import ShopItem from './ShopItem';
class App extends Component {
calcTotal(){
var sum = 0;
var cart = this.props.cart;
this.props.cart.forEach((item)=>{
sum +=(item.price*item.amount)
});
return sum;
}
render(){
return (
<div>
<p>
{JSON.stringify(this.props.cart)}
</p>
<h1>购物车</h1>
{this.props.cart.map(function(item){
return (<ShopItem key = {item.id} item = {item}/>)
})}
<hr/>
<p>
总价格:{this.calcTotal()}
</p>
</div>
);
}
}
export default connect(
(state) => {
return {
cart: state.cart
}
},
(dispatch) => {
return {
actions : bindActionCreators(actions,dispatch)
}
}
)(App);
2, reducer.js
export default (state , action) => {
if(state == undefined){
state = {
cart:[
{
id:1001,
price:1000,
amount:10,
name:'apple'
},
{
id:1002,
price:2000,
amount:1,
name:'computer'
},
{
id:1003,
price:100000,
amount:1,
name:'house'
},
{
id:1004,
price:1000000,
amount:2,
name:'people'
}
],
total:14
};
}
if(action.type=="ZENGJIA"){
var id = action.id;
console.log(id)
state = {
...state,
cart:state.cart.map((item)=>{
if(item.id !=id){
return item;
}else{
item.amount = ++item.amount
return item;
}
}),
total :++state.total
}
}else if(action.type=="JIANSHAO"){
var id = action.id;
state = {
...state,
cart:state.cart.map((item)=>{
if(item.id !=id){
return item;
}else{
item.amount = --item.amount
if(item.amount<0){
item.amount = 0;
}
return item;
}
}),
total :--state.total
}
}
return state;
}
3, actions.js
export const jianshao = (id) => {
return {"type" : "JIANSHAO","id":id}
};
export const zengjia = (id)=>{
return {"type" : "ZENGJIA","id":id}
};
4, main.js
import React from "react";
import {render} from "react-dom";
import {createStore} from 'redux';
import App from "./App.js";
import reducer from './reducer.js';
import {Provider} from 'react-redux';
let store = createStore(reducer);
render(
<Provider store = {store}>
<App></App>
</Provider>
,
document.getElementById("app-container")
);
ShopItem.js
import React from 'react';
import * as actions from './actions.js';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
class ShopItem extends React.Component {
addItem(id){
console.log(id)
this.props.actions.zengjia(id)
}
minusItem(id){
console.log(id)
this.props.actions.jianshao(id)
}
render(){
return (
<div>
<ul>
<li><span>名字</span> {this.props.item.name} </li>
<li><span>价格</span> {this.props.item.price} </li>
<li><span>数量</span> {this.props.item.amount} </li>
<li><button onClick = {(this.addItem).bind(this,this.props.item.id)}>+</button> {" "}<button onClick = {(this.minusItem).bind(this,this.props.item.id)}>-</button></li>
<li><span>总价</span> {this.props.item.price*this.props.item.amount} </li>
</ul>
</div>
);
}
}
export default connect(
(state)=>{
return {
cart:state.cart
}
},
(dispatch) =>{
return{
actions:bindActionCreators(actions,dispatch)
}
}
)(ShopItem);
总结,其实啥也没有,就是redux 中数据的单向流动!
actions 发送指令, reducer.js 中处理并返回新的数据,引起视图更新!
redux 写起来很舒服!
我这个没啥界面,很 好理解,不会的伙伴,可 参考前面3 篇内容!实在不会,可直接下载视频学习!
链接地址: