如何清理 useEffect 中的 Redux“useDispatch”操作？

Question

我找到了很多这方面的例子，但没有一个使用 Redux 和useDispatch，所以情况是这样的......

我有一个带有像这样的异步操作的操作文件...

//postsActions.tsx

export const asyncGetPostById = (postId: string) => {
    return async (dispatch: any, getState: () => AppState) => {
        try {
            dispatch(startLoader());
            const { data } = await axios.get(`api/posts/${postId}`);
            dispatch(setPostDataInReducer(data));
        } catch (error) {
            console.log(error)
        }
    };
};

我在 Post.tsx 组件中调用这个动作，就像这样......

const dispatch = useDispatch();

useEffect(() => {
    dispatch(asyncGetPostById(postId));
}, []);

这当然是一个简化的版本，但它的想法是一样的。现在我怎样才能清理像useEffect 这样的调度以避免这个错误......

警告：无法对未安装的组件执行 React 状态更新。 这是一个空操作，但它表明您的应用程序中存在内存泄漏。 要修复，请取消 useEffect 中的所有订阅和异步任务 清理功能。

编辑

这个想法是如何取消 ComponentWillUnmount 上的请求（或者在我的情况下是 useEffect 中的清理功能），如果它还没有完成，这样你就不会在后台有过时或未解决的请求，这将使你的应用程序慢。

这是一个非常常见的问题，很多人都成为受害者，并且有很多解决方案，但不适用于这种特殊情况（使用 dispatch 和 redux）。

有些使用AbortController()，有些使用axios.CancelToken，但我不知道在我的情况下如何使用它们。

Answer 1

为你的动作创建者试试这个：

export const asyncGetPostById = (postId: string) => async (dispatch: Function, getState: () => AppState) => {
    try {
        dispatch(startLoader());
        const { data } = await axios.get(`api/posts/${postId}`);
        dispatch(setPostDataInReducer(data));
    } catch (error) {
        console.log(error)
    }
};

这是一个微妙的变化，但是使用这个动作创建器，你实际上并没有返回任何东西（在 TypeScript 中它应该是 void）

使用void 返回，您在动作创建器中的dispatch 调用将直接转到您的reducer，但在您的组件中不会返回任何内容，因此您不必清理任何内容。

编辑：

此外，您应该考虑将dispatch 添加到您的useEffects 依赖数组中：

const dispatch = useDispatch();

useEffect(() => {
    dispatch(asyncGetPostById(postId));
}, [dispatch]);

Answer 2

你必须在你的 reducer 中创建一个 case 来清理当前状态。然后在useEffect 中你会这样做

React.useEffect(()=> {
 dispatch(your_action)
 return () => dispatch(clean_data_action)
},[])