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:
}
};
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 = ;
for(let i=; i<len;i++){
n+= list[i].price*this.refs['goods'+i].value||
}
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:,
goods:'橘子',
price:
},
{
id:,
goods:'蜜桃',
price:
},
{
id:,
goods:'葡萄',
price:
},
{
id:,
goods:'香蕉',
price:
}
],
count:
}
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();