在另一个操作后执行Redux调度操作
我有一个异步操作，从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 });
});
};
同步操作，更改skip状态：
export const setSkip = (skip) => {
return {
type: 'LIST.SET_SKIP',
skip: skip
};
};
top = 10, skip = 0初始状态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>
);
}
}
当点击第一次点击下一个按钮时，使用异步操作的skip值没有改变。 如何在同步操作后分派操作？
在同步动作之后，您不需要调度动作，而只需从减速器调用该功能？
所以它遵循这个流程：
同步动作调用 - > Reducer调用---> case函数（reducer）---> case函数（reducer）
而不是通常的流程，这可能是你的：
同步操作调用 - > Reducer调用
按照本指南拆分减速器以查看减速器是什么情况。
如果您想分派的动作有副作用，那么正确的方法是使用Thunk，然后您可以在动作后分派动作。
Thunk的例子：
export const setSkip = (skip) => {
return (dispatch, getState) => {
dispatch(someFunc());
//Do someFunc first then this action, use getState() for currentState if you want
return {
type: 'LIST.SET_SKIP',
skip: skip
};
}
};
如果您正在使用redux thunk，则可以轻松地将它们组合起来。 这是一个让动作创建者返回一个函数而不是一个动作的中间件。
如果你不需要链接动作创建者，只需要运行它们，你的解决方案现在可能适合你。
this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);
如果你需要链接（以同步方式调用它们）或者从第一个调度动作的数据等待，这是我推荐的。
export function onList(data) {
return (dispatch) => {
dispatch(ONLIST_REQUEST());
return (AsyncAPICall)
.then((response) => {
dispatch(ONLIST_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function setSkip(data) {
return (dispatch) => {
dispatch(SETSKIP_REQUEST());
return (AsyncAPICall(data))
.then((response) => {
dispatch(SETSKIP_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function onListAndSetSkip(dataForOnList) {
return (dispatch) => {
dispatch(onList(dataForOnList)).then((dataAfterOnList) => {
dispatch(setSkip(dataAfterOnList));
});
};
}
感谢你的回复，但我这样做了：
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);
首先，我计算新的skip并使用此新值分配异步操作。 然后我派遣一个syns动作，更新skip状态。