在我的react/redux/thunk应用程序中,我使用以下操作:
function catsRequested() {
return {
type: CATS_REQUESTED,
payload: {},
};
}
function catsReceived(landings) {
return {
type: CATS_RECEIVED,
payload: landings,
};
}
function catsFailed(error) {
return {
type: CATS_FAILED,
payload: { error },
};
}
export const fetchCats = () => ((dispatch, getState) => {
dispatch(catsRequested());
return catsAPI.loadCats()
.then((cats) => {
dispatch(catsReceived(cats));
}, (e) => {
dispatch(catsFailed(e.message));
});
});
Run Code Online (Sandbox Code Playgroud)
处理一些数据(简化).一切正常但我有很多代码用于每个数据实体(以及常量).我的意思是狗,老虎,鸟等相同的功能......
我看到每个实体都有类似的请求/接收/失败动作/常量.
什么是使用redux-thunk缩小代码的正确方法?
我发现有可能(在ES6承诺中,虽然创建了Promise对象)使用多个resolve/reject,这只会影响PromiseStatus一次但不会影响执行流程.
var p = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve(1);
console.log('Resolve 1');
}, 50);
setTimeout(function(){
resolve(2);
console.log('Resolve 2');
}, 100);
});
setTimeout(function(){
console.log('Status #1:', p);
}, 10);
setTimeout(function(){
console.log('Status #2:', p);
}, 60);
setTimeout(function(){
console.log('Status #3:', p);
}, 110);
p.then(function(x){
console.log('Value after:', x)
})
Run Code Online (Sandbox Code Playgroud)
在then()函数中,首先解析/拒绝将影响执行流程.所以我的问题是 - 它为什么会这样(功能/错误)?
PS我的环境是Node 4.1
PPS我的输出:
Status #1: Promise { <pending> }
Resolve 1
Value after: 1
Status #2: Promise { 1 }
Resolve 2
Status #3: Promise { 1 }
Run Code Online (Sandbox Code Playgroud) 我有简单的react/redux app和带有两个目标自动选择组件的搜索表单容器:
class QuoteBox extends Component {
onSelectSuggest(target, destination) {
this.props.setDestination(destination, target);
}
render() {
return (
<Destination
direction="From"
key="dest-from"
enterText={this.props.enterText.bind(this)}
onSelectSuggest={this.onSelectSuggest.bind(this, "origin")}
dataSource={this.props.originSuggests} />
<Destination
direction="To"
key="dest-to"
enterText={this.props.enterText.bind(this)}
onSelectSuggest={this.onSelectSuggest.bind(this, "destination")}
dataSource={this.props.destinationSuggests} />
)
}
}
function mapStateToProps(state) {
return {
originSuggests: state.originSuggests,
destinationSuggests: state.destinationSuggests,
origin: state.origin,
destination: state.destination
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
enterText: enterText,
setDestination: setDestination
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps )(QuoteBox)
Run Code Online (Sandbox Code Playgroud)
和Destination是一个简单的组件
export default class Destination extends Component {
render() {
return ( …Run Code Online (Sandbox Code Playgroud)