如何在依赖项 useEffect() 的更改值上调用 redux 操作？

Question

我正在使用同一个库中的 react-hook-form 和 useStateMachine，这与 redux 几乎相同。

我用这个例子来做，但它没有用： https ://orizens.com/blog/integrating-react-hook-form-and-redux-toolkit-rtk/

正在更新 redux store，一切似乎都正常，除了我的 redux action 陷入了循环。 可能是什么问题，因为我做的一切都是一样的，但我不知道它可能是什么？

const FormWrapper = (props) => {
    const useFormApi = useForm();
    const { state, actions } = useStateMachine({ updateAction });
    
    useReduxUpdater(useFormApi, actions.updateAction)

    return (
        <>
            <FormProvider {...methods}>
                <form onSubmit={methods.handleSubmit(props.onSubmit)}>
                    {props.children}
                </form>
            </FormProvider>
        </>
    )
}

export function useReduxUpdater (useFormApi, onChange) {
    const valuesChanges = useFormApi.watch()
    const values = useFormApi.getValues()
    useEffect(() => {
            onChange(values)
    }, [valuesChanges])
}

export function updateAction(state, payload) {
  return {
    ...state,
    ...payload
  };
}

Answer 1

你忘记派遣了。

export function useReduxUpdater (useFormApi, onChange) {
    const valuesChanges = useFormApi.watch()
    const values = useFormApi.getValues()
    const dispatch = useDispatch()
    useEffect(() => {
            dispatch(onChange(values))
    }, [valuesChanges])
}