Реагировать - useSelector не обновляется после отправки

Question

У меня есть метод, который будет использовать значение из useSelector и другую отправку, которая обновит мое значение из useSelector, однако кажется, что значение не обновляется после отправки, например

const userProfile = (props) => {
  const hasValidationError = useSelector(state => {
     state.hasValidationError;
  }

  const dispatch = useDispatch():

  const updateProfile = async (userId) => {
     dispatch(startValidation());    // <-- this would change the hasValidationError in state
     if (hasValidationError) {
        console.log('should not update user');
        await updateUser(userId);
        dispatch(showSuccessMsg());
     } else {
        conosole.log('can update user');
     }
  }
}

hasValidationError всегда будет ложным, даже если значение действительно изменилось из состояния, как я могу получить обновленное значение сразу после dispatch(startValidation())?

Я также пробовал что-то другое, например, создание значение локального состояния для мониторинга моего глобального состояния с помощью useState () и useEffect ()

const [canUpdateUser, setCanUpdateUser] = useState(false);

useEffect(() => {
    console.log('useEffect hasValidationError :>> ', hasValidationError);
    setCanUpdateUser(!hasValidationError);
  }, [hasValidationError]);

Затем используйте canUpdateUser в качестве условного флага в updateProfile (if (canUpdateUser)), однако, похоже, это работает только в первый раз, когда срабатывает проверка, но после этого значение canUpdateUser снова всегда является старым значением из моего updateProfile ... Как я могу решить эту проблему? Есть ли способ гарантировать получение обновленного значения из глобального состояния после определенных срабатываний диспетчеризации?

Answer 1

Не могли бы вы попробовать немного другой подход (комбинируя оба), так как кажется, что вы хотите прослушивать изменения hasValidationError, использование useEffect с зависимостью от этой переменной может решить вашу проблему.

const userProfile = (props) => {
  const { hasValidationError } = useSelector(state => state);
  const dispatch = useDispatch():

  const [userId, setUserId] = useState();

  const updateProfile = async (userId) => {
     dispatch(startValidation());
     setUserId(userId);
  };

  useEffect(() => {
    if (hasValidationError) {
        console.log('should not update user');
        await updateUser(userId);
        dispatch(showSuccessMsg());
     } else {
        conosole.log('can update user');
     }
  }, [hasValidationError]);
}