在我的 React Redux 项目中，我正在编写一个 thunk，并且希望它仅在之前的更新（如果有的话）完成后才调度。我知道 thunk 是帮助我们延迟向 reducer 发送操作的方法，它们也可以是异步的。这是我的 thunk 现在的样子：
myThunkMethod = () => async (dispatch, getState) =>{
dispatch(...my action...);
}
但我如何才能在前一次调用/状态更新完成后才调用调度
【问题讨论】：
标签： redux react-redux redux-thunk thunk
这是你需要做的：
const firstThunk = () => (dispatch, getState) => {
// do or dispatch something here
return Promise.resoleved("first thunk resolved");
}
const secondThunk = () => (dispatch, getState) => {
// do or dispatch something here
return Promise.resolved("second thunk resolved")
}
const thirdThunk = () => (dispatch, getState) => {
// I want to first dispatch the first thunk
dispatch(firstThunk()).then(result => {
// first thunk successfully dispatched now it's time for secondThunk
dispatch(secondThunk()).then(res => {
// here both firstThunk and secondThunk dispatched successfully
})
})
}
【讨论】：
只要您的 thunk 返回一个承诺，您就可以合并并等待 thunk 完成：(dispatch,getState)=>Promise。
const thunkA = (arg) => (dispatch, getState) => {
//do stuff and RETURN PROMISE
return Promise;
};
const thunkB = (arg) => (dispatch, getState) => {
//do stuff and RETURN PROMISE
return Promise;
};
//combined thunk
const combinedThunk = (arg) => (dispatch, getState) =>
tunkA(arg)(dispatch, getState).then(() =>
thunkB(arg)(dispatch, getState)
);
//from component
const Component = () => {
const dispatch = React.useDispatch();
React.useEffect(() => {
dispatch(thunkA("some arg")).then(() =>
dispatch(thunkB("someArg"))
);
}, [dispatch]);
};
以下是执行递归重击的方法：
const recursiveThunk = (times) => (dispatch, getState) => {
if (times === 0) {
return;
}
dispatch(started());
somePromise().then(
(result) => {
dispatch(success());
return recursiveThunk(times - 1)(dispatch, getState);
},
(reject) => dispatch(failed())
);
};
不清楚您在问题和评论中想要什么，但如果您想每次都使用数组中的一个项目作为参数调用 thunkA，那么您可以这样做：
const combinedThunk = (args) => (dispatch, getState) => {
if (args.length === 0) {
return;
}
return tunkA(args[0])(dispatch, getState).then(
() => combinedThunk(args.slice(1))(dispatch, getState),
(reject) => dispatch(failed(reject))
);
};
//call thunkA with 1, then 2 and then 3
dispatch(combinedThunk([1, 2, 3]));
【讨论】：