redux 案例购物车

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 篇内容！实在不会，可直接下载视频学习！

链接地址:

React入门和企业级项目 9天 （视频，笔记，源码完整）