取消useEffect清理功能中的所有订阅和异步任务- Redux工具包

// actionTypes.js
export const CANCEL_SUBSCRIPTION = 'CANCEL_SUBSCRIPTION';
export const CANCEL_ASYNC_TASK = 'CANCEL_ASYNC_TASK';

// actions.js
export const cancelSubscription = () => ({
  type: CANCEL_SUBSCRIPTION,
});

export const cancelAsyncTask = () => ({
  type: CANCEL_ASYNC_TASK,
});

// reducer.js
import { CANCEL_SUBSCRIPTION, CANCEL_ASYNC_TASK } from './actionTypes';

const initialState = {
  subscription: null,
  asyncTask: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case CANCEL_SUBSCRIPTION:
      // 取消订阅的逻辑
      return {
        ...state,
        subscription: null,
      };
    case CANCEL_ASYNC_TASK:
      // 取消异步任务的逻辑
      return {
        ...state,
        asyncTask: null,
      };
    default:
      return state;
  }
};

export default reducer;

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { cancelSubscription, cancelAsyncTask } from './actions';

const MyComponent = ({ cancelSubscription, cancelAsyncTask }) => {
  useEffect(() => {
    // 订阅和异步任务的逻辑
    // ...

    return () => {
      // 在组件卸载时调用取消订阅和取消异步任务的action创建函数
      cancelSubscription();
      cancelAsyncTask();
    };
  }, []);

  return (
    // 组件的渲染逻辑
    // ...
  );
};

export default connect(null, { cancelSubscription, cancelAsyncTask })(MyComponent);