javascript - Clean redux state when component unmount cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

Question

Guys I want to clear redux state to initial values when component unmount but I got this error

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Here's my code

signup.js

 useEffect(() => {
    if (cookies?.resentTimes?.num >= 3) {
      setResentTimes(3);
      setAttempts(3);
    }
    return () => {
      signupCleanup();
      console.log("cleaned up");
    };
  }, []);

signup.actions.js

export const signupCleanup = () => ({
  type: Types.SIGNUP_CLEANUP,
});

signup.reducer.js

export default function signup(state = initialState.auth.signup, action) {
  switch (action.type) {
    case CHECK_DOMAIN:
      return {
        ...state,
        checkingDomainStart: true,
        checkingDomainError: null,
      };
    case CHECK_DOMAIN_FAILURE:
      return {
        ...state,
        checkingDomainStart: false,
        checkingDomainError: action.payload.error,
      };
    case CHECK_DOMAIN_SUCCESS:
      return {
        ...state,
        checkingDomainStart: false,
        checkDomainRes: action.payload.res,
      };
    case CHECK_EMAIL:
      return {
        ...state,
        checkingEmailStart: true,
        checkingEmailError: null,
      };
    case CHECK_EMAIL_FAILURE:
      return {
        ...state,
        checkingEmailStart: false,
        checkingEmailError: action.payload.error,
      };
    case CHECK_EMAIL_SUCCESS:
      return {
        ...state,
        checkingEmailStart: false,
        checkEmailRes: action.payload.res,
      };
    case VERIFY_CODE:
      return {
        ...state,
        verifyingCodeStart: true,
        verifyingCodeError: null,
      };
    case VERIFY_CODE_FAILURE:
      return {
        ...state,
        verifyingCodeStart: false,
        verifyingCodeError: action.payload.error,
      }
    case VERIFY_CODE_SUCCESS:
      return {
        ...state,
        verifyingCodeStart: false,
        token: action.payload.token,
      }
    case SET_PASSWORD:
      return {
        ...state,
        settingPasswordStart: true,
        settingPasswordError: null,
      }
    case SET_PASSWORD_FAILURE:
      return {
        ...state,
        settingPasswordStart: false,
        settingPasswordError: action.payload.error,
      }
    case SET_PASSWORD_SUCCESS:
      return {
        ...state,
        settingPasswordStart: false,
        settingPasswordResponse: action.payload.res,
      }
case SIGNUP_CLEANUP:
  return {
    ...state,
    settingPasswordResponse: null,
    settingPasswordError: null,
    token: null,
    verifyingCodeError: null,
    checkingEmailError: null,
    checkEmailRes: null,
    checkDomainRes: null,
    checkingDomainError: null,
  }
default:
  return state;

} }

标签： javascriptreactjs