小编Mic*_*hov的帖子

如何重构redux + thunk动作/常量

在我的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缩小代码的正确方法?

redux redux-thunk

5
推荐指数
1
解决办法
312
查看次数

在ES6 Promise中允许多个解析/拒绝的原因是什么

我发现有可能(在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)

javascript promise ecmascript-6 es6-promise

4
推荐指数
2
解决办法
1143
查看次数

如何避免使用组件(ES6类)在react/redux容器中绑定

我有简单的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)

reactjs redux

3
推荐指数
1
解决办法
829
查看次数