import React,{useEffect} from 'react' import {connect} from 'react-redux' import './Home.css';
import Car from './Car' import Cart from './Cart' import Mytab from './Mytab' import { ActivityIndicator } from 'antd-mobile' import {Shuju} from './Actioncreator' const Home=(props)=>{
useEffect(() => {
props.dispatch(Shuju())
}, [])
console.log(props.datalist) return ( <div class="container" > {/* 搜索框 */} <header class="head"> <i class="tao iconfont icon-taobao1"></i> <div class='header-bd' > <a class="placeholder" onClick={()=>props.history.push('/cart')}> <span class="text inconfont icon-taobaosousuo">寻找宝贝店铺</span> </a> </div> </header> {/* 轮播图 */} <div class='lunbotu'> <Car/> </div> {/* 商品 */} <div class='shangpin'>{
props.datalist.map((item,index)=>{
return( <div class='list' onClick={()=>props.history.push('/goods',{id:props.datalist[index].id,img:props.datalist[index].img})}> <img key={index} src={props.datalist[index].img}/> <p class='p1'>{props.datalist[index].title}</p> <p class='p2'><span class='span1'>¥</span>{props.datalist[index].price}<span class='span2'>666人已购买</span></p> </div> )
})} </div> <Mytab/> </div> )
}
const mapStateToProps=(state)=>({
datalist:state.homereducer.datalist
})
export default connect(mapStateToProps)(Home);
//import img from '../assets/banner.jpg'
// iconfont.cn官网搜选图标，加入购物车
// 点击页面右上角购物车，将图标添加进项目（没有项目就新建）
// 点击“下载到本地”
// 解压压缩包，全部复制到项目public文件夹下，
// 在index.html中通过link引入iconfont.css
// 使用时，<i className='iconfont icon-具体名字'></i> // export default withRouter(Home);
//安装：node（npm） npm i(install) packageName
//npm react-router-dom
//npm i antd-mobile
//npm i redux react-redux redux-thunk
//(npx)create-react-app proName
//组件化（
// UI组件：只展示结构，展示用的（通过属性props传递数据）
// 智能组件：状态（state、setstate）、生命周期（componentDidMount,render(更新阶段））
// ）
//hooks:函数组建内，也可以声明状态，更新状态（useState）
//套到组件的最外层import {BrowerRouter as Route,Link}from 'react-router-dom"和import {HashRouter}from“react——router-dom”
{/* <Router>关于路由
//在每一页都显示，可以这样写 <div>title</div> //对于切换的,进行匹配 <Switch> <Route exact path='/' component={}/> <Route path='/doc' component={Doc}/> <Route path='doc：id' component={Doc1}/> <Route path='/' component={NOtFound}/> </Switch> </Router> */}
//第二次作业在pages文件夹里
// const Home=(props)=>{
// return(
// <div style={{textAlign:'center'}}> // <h2>React</h2> // <p>用户构建用户界面的 JavaScript库</p> // <div> // <button onClick={ // ()=>props.history.push('/doc')
// }>快速开始</button> // <button onClick={ // ()=>props.history.push('/tuto')
// }>入门教程</button> // </div> // </div> // )
// }
const homereducer=(state={datalist:[]},action)=>{ switch(action.type){ case 'Get': return {datalist:action.datalist} default: return state;
}
}
export default homereducer
import { createStore, compose, combineReducers, applyMiddleware } from 'redux'; import homereducer from './homereducer'; import cartreducer from './cartreducer' // import thunk from 'redux-thunk' let rootReducer = combineReducers({
homereducer,cartreducer
}); // let createStoreWithMiddleware = applyMiddleware(thunk)(createStore); // let store = createStoreWithMiddleware(rootReducer); function logger({ getState }) { return (next) => (action) => { console.log('will dispatch', action) // 调用 middleware 链中下一个 middleware 的 dispatch。 let returnValue = next(action) console.log('state after dispatch', getState()) // 一般会是 action 本身，除非 // 后面的 middleware 修改了它。 return returnValue
}
} const thunk = ({ dispatch, getState }) => (next) => (action) => { console.log('thunk'); if (typeof action === 'function') { return action(dispatch, getState);
} return next(action);
}; const store=createStore(
rootReducer,
compose(
applyMiddleware(logger, thunk), // //window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
); export {store}
import React,{useEffect} from 'react' import {Shuju} from './Actioncreator' import { connect } from 'react-redux' import './detailshow.css' const Goods = (props) => {
useEffect(() => {
props.dispatch(Shuju())
}, []) console.log(props) let id=props.location.state.id return(
props.datalist.map((item,index)=>{ if(props.datalist[index].id===id){ console.log(props.datalist[index].img) return(
<div class='dcontainer'>
<div class='navi-bar' onClick={()=>props.history.goBack()}>
<botton class="back">
<span class='back-i'>＜</span>
</botton>
</div>
<div class='con-img'>
<img src={props.datalist[index].img} class='tupian'/>
</div>
<div className='dmcontainer'>
<div class='dianpu'>
<i className='iconfont icon-taobaodianpu'></i>
<span>店铺</span>
</div>
<div class='kefu'>
<i className='iconfont icon-taobaokefu-01'></i>
<span>客服</span>
</div>
<div class='shoucang' onClick={props.history.push('/cart'),()=>{ if(document.getElementById('shoucang').className!=='iconfont icon-shoucang2')
{ document.getElementById('shoucang').className='iconfont icon-shoucang2' props.dispatch({
type:"ADD_TODO",
id:id,
title:props.datalist[index].title,
shoucang:[{id,title}]
})
}else(document.getElementById('shoucang')==="iconfont icon-shoucang2"){
props.dispatch({
type:"DEL_TODO",
id:id,
title:props.datalist[index].title,
shoucang:[{id,title}]
})
}
}}>
<i className='iconfont icon-shoucang2' id='shoucang'></i>
<span>收藏</span>
</div>
<div class='jiaru'>
<span>加入购物车</span>
</div>
<div class='liji'>
<span>立即购买</span>
</div>
</div>
</div>
)
}
})
) } const mapStateToProps = (state)=>({ datalist:state.homereducer.datalist
}) export default connect(mapStateToProps)( Goods)
const Shuju=()=>{ return (dispatch)=>{ let url='https://www.fastmock.site/mock/9e4bbf9e35ad15942010865690c87ac6/api/getgoodslist';
fetch(url,{
method:'GET',
headers:{ 'Content-TYpe':'application/json' },
})
.then(res=>res.json())
.then(res=>{
dispatch({
type:'Get',
datalist:res.data
})
})
}
}
export {Shuju}
import React,{useEffect} from 'react' import Mytab from './Mytab' import { connect } from 'react-redux' import {Shuju} from './Actioncreator' const Cart = (props) => {
useEffect(() => {
props.dispatch(Shuju())
}, []) return ( <div> props.shoucang.map((item,index)=> <li key={index}>{item} <button onClick={ ()=>{
props.dispatch({
type: "DEL_TODO",
index: id
})
}
}>删除</button>></li> ) <Mytab /> </div> )
}
const mapStateToProps = (state)=>({
shoucang:state.cartreducer,
datalist:state.homereducer.datalist
})
export default connect(mapStateToProps)(Cart)
import { scryRenderedComponentsWithType } from "react-dom/test-utils"; let srr=new Object(); let shoucang=[]; function cartreducer(state=shoucang,action){ if(action.type=='ADD_TODO'){ let i=0;
srr.id=action.id;
srr.title=action.title;
shoucang[i]=srr; return {...state,shoucang:action.shoucang}
} if(action.type=='DEL_TODO'){ let arr = [...state];
arr.splice(action.id,1); return arr;
} return state;
}
export default cartreducer
import React from 'react';
import { BrowserRouter as Router, Redirect, Route, NavLink, Switch } from 'react-router-dom' import Header from './pages/myHeader';
import routes from './router.config';
import {Button,TabBar} from 'antd-mobile' import Home from './Taobao/Home';
import Cart from './Taobao/Cart';
import List from './Taobao/List';
import Search from './Taobao/Search' import {store} from './Taobao/Store' import { Provider } from 'react-redux';
import Login from './Taobao/Login';
import Goods from './Taobao/Goods'; const App = ()=>{ return <Provider store={store}>
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/cart' component={Cart} />
<Route path='/list' component={List}/>
<Route path='/search' component={Search}/>
<Route path='/service' component={Login}/>
<Route path='/goods' component={Goods}/>
{}
<Route render={()=><Redirect to='/'/>} />
</Switch>
{}
</Router>
</Provider>
} const RouteWithSubRoutes=(props)=>{ return <Route
path={props.path}
render={
()=><props.component routes={props.routes}/>
}/>
}
export default App;
export {RouteWithSubRoutes}; 
