如何解决通过观察状态变化来解决handleSubmit的诺言
我已经增强了Context的派发,类似于this blog post中所述。此外,就像Redux一样,我可以创建一个中间件链,我的所有操作都将通过该中间件链进行。基于来自Real World Redux的this middleware示例,我有一个中间件可以集中处理所有API消耗。
这意味着我的组件调度动作来发起API请求,并且不能轻易地观察到表示异步操作的Promise。因此,我无法将该承诺传递给RFF的handleSubmit
。相反,我需要创建自己的异步函数以传递给handleSubmit
并通过观察应用程序状态的变化来解决其诺言。
@erikras创建了Redux Promise Listener,它使用中间件观察调度的动作来解决类似的问题。
我首先创建了一个React钩子,该钩子通过观察状态变化来实现诺言,但感觉很尴尬:
/**
* usePromiseSettler invokes an async executor function,and then will observe changes in
* state to determine when the async function's promise has settled. Once settled,* either the success or failure callback will be invoked.
*
* @param executor Function that initiates state change we wish to observe
* @param successCondition Condition that indicates executor operation succeeded
* @param successCallback Callback to invoke when executor operation succeeds
* @param failureCondition Condition that indicates executor operation has failed
* @param failureCallback Callback to invoke when executor operation fails
* @returns An async function returning a promise which will be settled when
* a success or error condition is observed.
*/
export const usePromiseSettler = (
executor: (...args: any[]) => any,successCondition: boolean,successCallback: (value?: any) => void,failureCondition: boolean,failureCallback: (value?: any) => void,) => {
const resolveRef = useRef<(value?: any) => void>();
const successConditionRef = useRef<boolean>(false);
const failureConditionRef = useRef<boolean>(false);
const staticExecutor = React.useCallback(executor,[]);
const handlePromise = React.useCallback(
(value) => {
staticExecutor(value);
return new Promise((resolve) => {
resolveRef.current = resolve;
});
},[staticExecutor],);
if (!successConditionRef.current && successCondition) {
successCallback(resolveRef.current);
}
if (!failureConditionRef.current && failureCondition) {
failureCallback(resolveRef.current);
}
successConditionRef.current = successCondition;
failureConditionRef.current = failureCondition;
return handlePromise;
};
用法:
const previousDidCreateSucceed = usePrevious(
state.targetState.didCreateSucceed,);
const previousError = usePrevious(state.targetState.error);
const handleSubmit = usePromiseSettler(
(target: TargetData) => {
const action = requestPostTarget(target);
dispatch(action);
},!previousDidCreateSucceed && state.targetState.didCreateSucceed,(resolve) => {
resolve(state.targetState.data);
history.push("/targets");
},!previousError && !!state.targetState.error,(resolve) => {
resolve({ [FORM_ERROR]: state.targetState.error });
},);
...
return (
<Form
onSubmit={handleSubmit}
这个问题是否已经以更低的复杂度在其他地方解决了?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。