React Redux dispatch action after another action
<p>I have an <strong>async</strong> action, which fetch data from REST API:</p>

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

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

<p>A <strong>sync</strong> action, which changes <code>skip</code> state:</p>

<pre><code>export const setSkip = (skip) =&gt; {
    return {
        type: 'LIST.SET_SKIP',
        skip: skip
    };
};
</code></pre>

<p>Initial state for <code>top = 10, skip = 0</code>. In component:</p>

<pre><code>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 (
            &lt;div&gt;
                &lt;table&gt; ... &lt;/table&gt;
                &lt;button onClick={this.nextPage.bind(this)}&gt;Next&lt;/button&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>

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