Redux 同步重复操作
我试图在Redux中进行同步调度调用,其中第一个调用更新Redux 同步重复操作,redux,react-redux,redux-thunk,Redux,React Redux,Redux Thunk,我试图在Redux中进行同步调度调用,其中第一个调用更新isLoading状态,以便我们可以在UI上显示加载图标,然后第二个调用在后台执行大量同步计算以更新项目位置-大约需要2-5秒 第一个操作发生并且状态正确更改,但在该操作发生后,它似乎不会立即命中react前端组件,而是转到第二个分派。当我在第一次调度后添加一个短的超时时,它就可以工作了,但我讨厌硬编码固定的等待时间 这个问题有更好的解决方案吗 不工作: const showLoadingIcon = () => ({type: ty
isLoading
状态,以便我们可以在UI上显示加载图标,然后第二个调用在后台执行大量同步计算以更新项目位置-大约需要2-5秒
第一个操作发生并且状态正确更改,但在该操作发生后,它似乎不会立即命中react前端组件,而是转到第二个分派。当我在第一次调度后添加一个短的超时时,它就可以工作了,但我讨厌硬编码固定的等待时间
这个问题有更好的解决方案吗
不工作:
const showLoadingIcon = () => ({type: types.SHOW_LOADING_ICON});
export const updateInteractionTypeScores = (updatedValues) => dispatch => {
dispatch(showLoadingIcon());
dispatch({type: types.UPDATE_VALUES, updatedValues});
};
工作:
const showLoadingIcon = () => ({type: types.SHOW_LOADING_ICON});
export const updateInteractionTypeScores = (updatedValues) => dispatch => {
dispatch(showLoadingIcon());
setTimeout(() => dispatch({type: types.UPDATE_VALUES, updatedValues}), 100);
};
您所谓的同步操作实际上是一个异步操作,在特定时间更新存储。对于这样的事情,一般的模式是(至少)对动作的每个状态有三个分派
启动异步操作
异步操作成功
异步操作失败
启动异步操作将发送一个“ASYNC_action_LAUNCHED”操作,该操作将更新组件正确连接到的存储(对吗?),因此将显示加载图标
成功后,将调度“ASYNC_ACTION_success”,更新存储,并使用新的存储内容重新加载组件
失败时,将调度“ASYNC_ACTION_failure”,更新存储,并使用空内容和错误消息重新启动组件
实际上,这相当于编写更多的代码,但这允许更多的可能性:
const asyncActionLaunched = () => ({type: types.ASYNC_ACTION_STARTED});
const asyncActionSuccess = () => ({type: types.ASYNC_ACTION_SUCCESS});
const asyncActionFailed = () => ({type: types.ASYNC_ACTION_FAILED});
export const updateInteractionTypes = dispatch => {
dispatch(asyncActionLaunched());
// I don't know your setup
// But this whould either be a Promise, or return a boolean
// in the case of a synchronous function
const result = makeSynchronousCalculations();
if (result) {
dispatch(asyncActionSuccess());
// dispatch another action that updates store
} else {
dispatch(asyncActionFailed());
// dispatch another action that updates store
}
// in the case of a promise
asyncBlockingAction()
.then(
dispatch(asyncActionSuccess());
// dispatch another action that updates store
).catch(
dispatch(asyncActionFailed());
// dispatch another action that updates store
);
};
啊,这完全有道理,应该可以很好地工作…谢谢!