另一个动作后React Redux调度操作 [英] React Redux dispatch action after another action

问题描述

我有一个异步操作，它从REST API获取数据：

I have an async action, which fetch data from REST API:

export const list = (top, skip) => dispatch => {
    dispatch({ type: 'LIST.REQUEST' });

    $.get(API_URL, { top: top, skip: skip })
        .done((data, testStatus, jqXHR) => {
            dispatch({ type: 'LIST.SUCCESS', data: data });
        });
};

同步操作，更改跳过州：

export const setSkip = (skip) => {
    return {
        type: 'LIST.SET_SKIP',
        skip: skip
    };
};

的初始状态top = 10，skip = 0 。在组件中：

class List extends Component {
    componentDidMount() {        
        this.list();
    }

    nextPage() {
        let top = this.props.list.top;
        let skip = this.props.list.skip;

        // After this 
        this.props.onSetSkip(skip + top);

        // Here skip has previous value of 0.
        this.list();
        // Here skip has new value of 10.
    }

    list() {
        this.props.List(this.props.list.top, this.props.list.skip);
    }

    render () {
        return (
            <div>
                <table> ... </table>
                <button onClick={this.nextPage.bind(this)}>Next</button>
            </div>
        );
    }
}

当按钮下一步时第一次单击，值跳过，它使用未更改的异步操作。
如何在同步操作后发送操作？

When button Next at first time clicked, value of skip which uses async action not changed. How I can to dispatch action after sync action?

推荐答案

感谢您的回复，但我是这样做的：

Thanks for the replies, but I made it this way:

let top = this.props.list.top;
let skip = this.props.list.skip;
let newSkip = skip + top;

this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);

首先我计算新跳过并派遣一个使用此新值进行异步操作。然后我发送一个syns动作，在状态下更新 skip 。

First I calculate new skip and dispatch an async action with this new value. Then I dispatch a syns action, which updates skip in state.

这篇关于另一个动作后React Redux调度操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！