在另一个动作之后反应 Redux 调度动作 [英] React Redux dispatch action after another action

问题描述

我有一个 async 操作，它从 REST API 获取数据:

export const list = (top, skip) =>调度 =>{dispatch({ type: 'LIST.REQUEST' });$.get(API_URL, { 顶部:顶部，跳过:跳过 }).done((data, testStatus, jqXHR) => {dispatch({ type: 'LIST.SUCCESS', data: data });});};

一个同步动作，改变skip状态:

export const setSkip = (skip) =>{返回 {类型:'LIST.SET_SKIP'，跳过:跳过};};

top = 10，skip = 0 的初始状态.在组件中:

class List extends Component {componentDidMount() {this.list();}下一页() {让顶部 = this.props.list.top;让跳过 = this.props.list.skip;//在这之后this.props.onSetSkip(skip + top);//这里跳过的先前值为 0.this.list();//这里跳过的新值是 10.}列表() {this.props.List(this.props.list.top, this.props.list.skip);}使成为 () {返回 (<div><表格>... </table><button onClick={this.nextPage.bind(this)}>Next</button>

);}}

当按钮 Next 第一次点击时，使用异步操作的 skip 的值没有改变.同步动作后如何调度动作?

解决方案

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

let top = this.props.list.top;让跳过 = this.props.list.skip;让 newSkip = 跳过 + 顶部；this.props.onList(top, newSkip);this.props.onSetSkip(newSkip);

首先我计算新的 skip 并使用这个新值调度异步操作.然后我发送一个 syns 动作，它更新 skip 状态.

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 });
        });
};

A sync action, which changes skip state:

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

Initial state for top = 10, skip = 0. In component:

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);

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.

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