redux搭配react-redux实现简易购物车

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);

效果图如下：