Call a custom hook after a dispatch is called-CodePudding

Hey I have a situation in which i want my hook to be called after my dispatch is finished. My dispatch is inside a useCallback hook.

the code looks like this

const useNavigateToEdit = (property: PropertyData): UseNavigateToEdit => {
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const areaUnit = getAreaUnit();
  const isValidLocLevel = useIsValidLocLevel(); //this is the hook i want to call after the dispatch inside usecallback is called

  const edit = useCallback(() => {
    const partialProperty = transformPropertyToPartialProperty(property, areaUnit);
    //this is the dispatch that will chnage my store data that i want to use inside my hook
    dispatch(updatePartialProperty(partialProperty));
    navigation.navigate(...NavActions.PROPERTY.goToEdit());
  }, [areaUnit, dispatch, navigation, property]);

  // TODO: XML feed listings can not be edited. Need to cater for that.
  const canEdit = true;

  return [edit, canEdit];
};

CodePudding user response：

You can't call the hook inside a function, What you can do is you have to return some callback from the hook which will do some task, that you can call anywhere.

const [isValidLocLevel, updateValidLoc] = useIsValidLocLevel();

const edit = useCallback(async () => {
  const partialProperty = transformPropertyToPartialProperty(
    property,
    areaUnit
  );
  await dispatch(updatePartialProperty(partialProperty));
  updateValidLoc(); // call here to update validLocLevel
  navigation.navigate(...NavActions.PROPERTY.goToEdit());
}, [areaUnit, dispatch, navigation, property]);

CodePudding user response：

You can try creating a custom promise using your action dispatch and then use .then like below.

    const useNavigateToEdit = (property: PropertyData): UseNavigateToEdit => {
          const dispatch = useDispatch();
          const myPromise = ()=> Promise.resolve(dispatch(updatePartialProperty(partialProperty))); /// creating promise 
          const navigation = useNavigation();
          const areaUnit = getAreaUnit();
          const isValidLocLevel = useIsValidLocLevel(); //this is the hook i want to call after the dispatch inside usecallback is called
        
          const edit = useCallback(() => {
            const partialProperty = transformPropertyToPartialProperty(property, areaUnit);
            //this is the dispatch that will chnage my store data that i want to use inside my hook
             myPromise().then((res:any)=>{
                       //Your hook here
                navigation.navigate(...NavActions.PROPERTY.goToEdit());
        })
            
          }, [areaUnit, dispatch, navigation, property]);
        
          // TODO: XML feed listings can not be edited. Need to cater for that.
          const canEdit = true;
        
          return [edit, canEdit];
        }

;