1.创建reducer
eg:./shopcarList/shopCarList.js
const initState = [ //初始状态
{
id: 1,
name: "apple",
allnum: 10,
num: 0,
remainnum:10,
price: 5
},
{
id: 2,
name: "apple2",
allnum: 9,
remainnum:9,
num: 0,
price: 6
}
]
function shopCarList(state=initState, action) { //当dispatch动作时,再这里处理数据
console.log(action)
switch (action.type) {
case 'ONINCREMENT':
return state.map(item=>{
if(item.id === action.payload.id){
item.num++;
item.remainnum--;
}
return item;
})
case 'ONDECREMENT':
return state.map(item=>{
if(item.id === action.payload.id){
item.num--;
item.remainnum++;
}
return item;
})
default:
return state;
}
}
export default shopCarList;
2.创建store
import shop from './shopcarList/shopCarList';
import {combineReducers} from 'redux';
export default combineReducers({ //一个项目当有多个reducer时,需要
shop:shop
});
3.src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux'; //使用react-redux进行自动连接,Provider包裹的后代组件都可以直接通过connect来获取数据。
import {createStore} from 'redux';
import shopcar from './reducers';
const store=createStore(shopcar); //创建store,shopcar是reducer
window.store=store; //便于在浏览器进行调试
ReactDOM.render(
<Provider store={store}> //传递store,Provider包裹的后代组件都可以获取到
<App />
</Provider>,
document.getElementById('root')
);
3.action的目录结构如下:
1.index.js :action目录的出口
2.actionType.js: 所有action.type都定义在这个文件,避免action重复
3.具体的action操作。
actionType.js:
export const ONINCREMENT="ONINCREMENT"; //shopcarList
export const ONDECREMENT="ONDECREMENT"; //shopcarList
export const TEST= "TEST"; //test
index.js:
import {increment,decrement} from './shopcarList'
import {test} from './test'
export {
increment,decrement,test
}
shopcarList/index.js:
import {ONINCREMENT,ONDECREMENT} from '../actionType';
export const increment=(id)=>{
return{
type:ONINCREMENT,
payload:{
id
}
}
}
export const decrement=(id)=>{
return{
type:ONDECREMENT,
payload:{
id
}
}
}
test/index.js
//暂时没有操作
4.components/shopcarList/index.js
import React from 'react';
import {connect} from 'react-redux';
import {increment,decrement} from '../../actions'
class ShopCarList extends React.Component{
constructor(props){
super(props);
this.state={
arr:[]
}
}
componentDidMount(){
this.renderData();
}
renderData=()=>{
this.setState({
num:this.props.num
})
}
render(){
return (
<div>
{
this.props.arr.map(item=>{
return(
<div key={item.id}>
<button onClick={this.props.decrement.bind(this,item.id)} disabled={item.num <=0 ? true : false }>-</button>
<button >购买数量:{item.num}</button>
<button >支付金额:{item.price * item.num}</button>
<button onClick={this.props.increment.bind(this,item.id)} disabled={item.num >=item.allnum ? true : false }>+</button>
<button >剩余量:{item.remainnum}</button>
<button >总量:{item.allnum}</button>
<hr/>
</div>
)
})
}
</div>
)
}
}
const mapStateToProps=(state)=>{
console.log(state)
return {
arr:state.shop
}
}
//第二种方法
// const mapDispatchToprops=dispatch=>{
// console.log(dispatch)
// return {
// add:(id)=> dispatch(increment(id)),
// jian:(id)=>dispatch(decrement(id))
// }
// }
// export default connect(mapStateToProps,mapDispatchToprops)(ShopCarList);
//第一种方法
export default connect(mapStateToProps,{increment,decrement})(ShopCarList);
效果图如下: