这个就比较简单!
1, npm 安装
npm install redux-thunk --save-dev
2, 使用
连接store 写法就不同了
ShopItem.js
import React from 'react';
import * as actions from './actions.js';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
class ShopItem extends React.Component {
addItem(id){
this.props.dispatch(actions.gettext(id));
}
minusItem(id){
this.props.dispatch(actions.jianshao(id))
}
render(){
return (
<div>
<ul>
<li><span>名字</span> {this.props.item.name} </li>
<li><span>价格</span> {this.props.item.price} </li>
<li><span>数量</span> {this.props.item.amount} </li>
<li><button onClick = {(this.addItem).bind(this,this.props.item.id)}>+</button> {" "}<button onClick = {(this.minusItem).bind(this,this.props.item.id)}>-</button></li>
<li><span>总价</span> {this.props.item.price*this.props.item.amount} </li>
</ul>
</div>
);
}
}
export default connect(
(state) => {
return {
cart: state.cart
}
}
)(ShopItem);
连接connect 只需要一个参数
使用就简单了,就是 直接可以使用dispatch 了
我们重点来看下actions.js
若是 要处理yibu操作就需要返回一个带dispatch入参的函数!
这样就可异步操作了! thunk 使用完了,
无论异步还是同步,都是直接在actions.js 中写就行了!