How dispatch only once when mounting a page?

Question

Good afternoon, dear friends. I now have dispatch executed on every action. I only need dispatch once when mounting the page and delete it when unmounting the page. Tell me how to do this.

const myRef = createRef<any>();


const KeyboardAvoidingWrapper: React.FC<IKeyboardAvoidingProps> = (
  props: IKeyboardAvoidingProps,
) => {
  const dispatch = useDispatch();
  dispatch(setReference(myRef));
  if (isAndroid) {
    return (
      <ScrollView ref={myRef} style={styles.scroll} contentContainerStyle={styles.scrollContent}>
        <KeyboardAvoiding>{props.children}</KeyboardAvoiding>
      </ScrollView>
    );
  }

  return (
    <KeyboardAwareScrollView
      ref={myRef}
      style={styles.scroll}
      extraHeight={40}
      contentContainerStyle={styles.scrollContent}
    >
      {props.children}
    </KeyboardAwareScrollView>
  );
};

Nooruddin Lakhani · Accepted Answer · 2020-10-26T09:18:32.023

0

Try this

// Similar to componentDidMount
useEffect(() => {
    const dispatch = useDispatch();
    dispatch(setReference(myRef));

    return () => dispatch(deleteReference(myRef)); // delete here on unmount
  }, []);
}

edited Oct 26 '20 at 09:18

answered Oct 26 '20 at 08:50

Nooruddin Lakhani

7,507
2
19
39

please tell me how to delete when unmounting – Madiever Oct 26 '20 at 09:09
what you want to delete? – Nooruddin Lakhani Oct 26 '20 at 09:12
to clear state. On mount i save ref in state and on unmount i want to clear state – Madiever Oct 26 '20 at 09:14
thank you, friend. I partially helped. Now I can't clear state when unmounting. I created an action unSetReference that should set state "myRef" to undefined, but instead it returns the {current: null} object. Any thoughts on what's wrong and how to fix it? – Madiever Oct 26 '20 at 11:41

How dispatch only once when mounting a page?

1 Answers1