在另一个动作之后反应 Redux 调度动作 [英] React Redux dispatch action after another action
本文介绍了在另一个动作之后反应 Redux 调度动作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 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屋!
查看全文