react购物车demo

import React, { Component } from 'react';
import './App.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import action from './shopcar/reduce/action'
// ui 组件 只取数据
class App extends Component {
  constructor(props){
    super(props);
    this.addfriut = this.addfriut.bind(this); 
    this.allprice = this.allprice.bind(this);
    this.state = {
      n: 0
    }
  };
  addfriut(){
    this.props.add(this.goods.value,this.price.value);
    this.goods.value='';
    this.price.value =''
    console.log(this.props);
  };
  allprice(){
    console.log(this.props);
    let {list} = this.props.myReducer;
    let len = list.length;
    let n = 0;
    for(let i=0; i<len;i++){
      n+= list[i].price*this.refs['goods'+i].value||0
    }
    this.setState({
        n
    })
  }
  render() {
   let {list} = this.props.myReducer;
    return (
      <div className="App">
        名字:<input type="text" ref={goods=>this.goods=goods}/>
        <br/>
        价格:<input type="text" ref={price=>this.price=price}/>
        <button onClick={this.addfriut}>addfriut</button>
        <button onClick={this.allprice}>计算价格</button>
      <ul>
          {list.map((item)=>{
            return (
              <li key={item.id}>
                <span>
                水果:{item.goods}  价格:{item.price}
                </span>
                <input type="text" ref={'goods'+item.id}/>
              </li> 
            )
        })}
        {this.state.n}
      </ul>
      </div>
    );
  }
}
// // 实现计算属性的操作 类似vuex getters
let mapStateToProps = (state)=>{

  return state
};
// // 将dispatch传进去省区了actions 里的方法去 触发action的内置对象
let mapDispatchToProps = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToProps)(App);
// export default App;

shopcar/store.js

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reduce';


let  store = createStore(reducer,applyMiddleware(thunk));

export default store;

shopcar/reducer.js

import {combineReducers} from 'redux';
import  myReducer from './reduce/reducer';

let reducer = combineReducers({
    myReducer
});

export default reducer;

shopcar/reduce/state.js

let  state = {
    list:[
        {
            id:0,
            goods:'橘子',
            price:6
        },
        {
            id:1,
            goods:'蜜桃',
            price:7
        },
        {
            id:2,
            goods:'葡萄',
            price:6
        },
        {
            id:3,
            goods:'香蕉',
            price:4
        }
    ],
    count:3
}
export default state;

shopcar/reduce/reducer.js

import _state from './state';

let reducer=(state=_state,action)=>{
    let newState = {...state};
    if(action.type==='ADD'){
        action.obj.id = ++newState.count;
        newState.list.push(action.obj)
    }
    return newState;
   
}

export default reducer;

shopcar/reduce/action.js

let action = {
    add(goods,price){
        return {
            type:'ADD',
            obj:{
                goods,
                price                
            }
        }
    },
    pre(goods,price){
        return (dispatch)=>{
            dispatch({
                type:'ADD',
                obj:{
                    goods,
                    price                
                }
            })
        }
    }

}

export default action;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux'
//React-Redux 提供Provider组件，可以让容器组件拿到state
// import App from './power/withRouter';
// import store from './react-redux/store';
import store from './shopcar/store';
// import {BrowserRouter as Router} from 'react-router-dom'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>, document.getElementById('root'));
registerServiceWorker();