Я пытаюсь обновить учетные данные пользователя в проекте React/Redux с помощью машинописного текста. Я использую Firebase, поэтому учетные данные пользователя возвращаются в .then() блоке signInWithPopup метода.

Вот компонент. Он нарушен, потому что нарушает правила крючков. Я не могу найти обходной путь. Я думал, что использование useEffect с именем объекта состояния currentUser позволит мне запустить хук в корне функционального компонента после currentUser обновления состояния local () внутри .then блока.

Функциональный Компонент

 import React, { useState, useEffect } from 'react';
import {
  getAuth,
  signInWithPopup,
  GithubAuthProvider,
  Auth,
} from 'firebase/auth';
import 'bulmaswatch/superhero/bulmaswatch.min.css';
import { storeState } from '../state';
import { UserData } from '../state/action-creators';
import { useTypedSelector } from '../hooks/use-typed-selector';

const UserAuth: React.FC = () => {
  const [currentUser, setCurrentUser] = useState<UserData | null>(null);
  const [loginButtonText, setLoginButtonText] = useState<string>('Log In');
  const provider: GithubAuthProvider = new GithubAuthProvider();
  const auth: Auth = getAuth();

  useEffect(() => {
  if (currentUser !== null) {
    useTypedSelector(({ user }) => currentUser);
  }
  }, [currentUser]);

  const signinHandler = () => {
    signInWithPopup(auth, provider)
      .then(({ user: { uid, email, displayName, photoURL } }) => {
        console.log({ uid, email, displayName, photoURL });

        const userPayload: UserData = {
          uid: uid,
          email: email as string,
          displayName: displayName as string,
          photoURL: photoURL as string,
        };

        setCurrentUser(userPayload);

        console.log({ userPayload });

        console.log({ storeState });
      })
      .catch((err) => {
        const errorCode = err.code;
        const errorMessage = err.message;
        const email = err.email;
        const credential = GithubAuthProvider.credentialFromError(err);
        // todo - display errors
        console.log(err);
        console.log(errorCode, errorMessage, email, credential);
      });
  };

  return (
    <button className="gh-button button is-primary" onClick={signinHandler}>
      <i className="fab fa-github" />
      <strong style={{ marginLeft: '10px' }}>{loginButtonText}</strong>
    </button>
  );
};

export default UserAuth;

 

Это и есть useTypedSelector крючок

 import { useSelector, TypedUseSelectorHook } from 'react-redux';
import { RootState } from '../state';

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
 

Это мой userReducer для контекста

 
import produce from 'immer';
import { ActionType } from '../action-types';
import { Action } from '../actions';

interface UserState {
  uid: string;
  email: string;
  displayName: string;
  photoURL: string;
}

const initialState: UserState = {
  uid: '',
  email: '',
  displayName: '',
  photoURL: '',
};

const reducer = produce((state: UserState = initialState, action: Action) => {
  switch (action.type) {
    case ActionType.SET_USER:
      const { uid, email, displayName, photoURL } = action.payload;
      state.uid = uid;
      state.email = email;
      state.displayName = displayName;
      state.photoURL = photoURL;
      return state;

    default:
      return state;
  }
});

export default reducer;

 

Примечания

Я использую Immer, чтобы легко изменять неизменяемое состояние

Если бы я мог просто подключить свой компонент к хранилищу Redux, чтобы я мог отправлять действие непосредственно из своего компонента — это тоже было бы здорово.

Я почти готов переключиться на контекстный API, потому что Redux нигде не так интуитивно понятен, как Vuex.

Это даже не проблема с исправлением. Как вы упомянули, это проблема с «правилами крючков». Все вызовы хука должны находиться на верхнем уровне компонента функции или другого пользовательского хука и никогда не могут быть вложены в условные операторы.

На самом деле из текущего кода неясно, что вы пытаетесь здесь сделать. Если мы проигнорируем аспект правил крючков, само использование селектора покажется неправильным:

   useEffect(() => {
  if (currentUser !== null) {
    useTypedSelector(({ user }) => currentUser);
  }
  }, [currentUser]);
 

Даже если бы это было законное использование, оно не делает ничего полезного:

• Селектор игнорирует user поле, разрушаемое из состояния, и возвращает currentUser переменную, уже находящуюся в области действия
• useSelector всегда возвращает значение, которое ваш селектор извлекает из объекта состояния Redux, но здесь возвращаемое значение полностью игнорируется

Я думаю, вы хотите сказать, что «когда я получу новый пользовательский объект от Firebase, я хочу обновить хранилище Redux для хранения этих пользовательских данных». В этом случае на самом деле вам нужно отправить действие, противоположное выбору данных из состояния.

Предполагая, что это так, то правильный подход здесь, вероятно, будет включать useState<UserData> полное удаление и использование крючка React-Redux useDispatch , позволяющего отправлять действия из компонента:

 // The reducer file should export an action creator for this case
import { userLoaded } from './userSlice';

const UserAuth = () => {
  const [loginButtonText, setLoginButtonText] = useState<string>('Log In');
  // get access to the Redux store `dispatch` method
  const dispatch = useAppDispatch();

  const signinHandler = () => {    
    const provider: GithubAuthProvider = new GithubAuthProvider();
    const auth: Auth = getAuth();

    signInWithPopup(auth, provider)
      .then(({ user: { uid, email, displayName, photoURL } }) => {
        console.log({ uid, email, displayName, photoURL });

        const userPayload: UserData = {
          uid: uid,
          email: email as string,
          displayName: displayName as string,
          photoURL: photoURL as string,
        };

        // Dispatch a Redux action containing this data
        dispatch(userLoaded(userPayload))
      })
      .catch((err) => {
        const errorCode = err.code;
        const errorMessage = err.message;
        const email = err.email;
        const credential = GithubAuthProvider.credentialFromError(err);
        // todo - display errors
        console.log(err);
        console.log(errorCode, errorMessage, email, credential);
      });
  };

  return (
    <button className="gh-button button is-primary" onClick={signinHandler}>
      <i className="fab fa-github" />
      <strong style={{ marginLeft: '10px' }}>{loginButtonText}</strong>
    </button>
  );
};
 

Я думаю, вам не хватает некоторых ключевых моментов понимания того, как работает Redux и как его правильно использовать. Я настоятельно рекомендую прочитать учебник «Основы Redux» в наших основных документах Redux, в котором рассказывается «как правильно использовать Redux».

Еще пара замечаний по коду:

• Вы не должны создавать «экземпляры», такие как поставщик аутентификации Github, внутри логики рендеринга. Сделайте это в эффекте или просто непосредственно в обработчике щелчка
• Вы также должны использовать наш официальный пакет инструментария Redux для написания своей логики Redux (редукторы и т. Д.). В RTK уже встроен Immer, и он разработан для хорошего опыта использования TS. В частности, createSlice API автоматически создаст создателей действий и типы действий для вас на основе определяемых вами редукторов.
• Обычно рекомендуется не использовать этот React.FC тип. Вместо этого просто объявите тип props в компоненте, если таковые имеются, и пусть TS выведет тип возвращаемого значения.