How to use a typed selector inside of a nested function within a React Functional Component?

Question

I'm trying to update user credentials in a React/Redux project with TypeScript. I'm using Firebase so the user credentials are being returned in the .then() block of the signInWithPopup method.

Here is the component. It is broken because it is breaking the rules of hooks. I can't find a workaround. I thought that using useEffect with a state object named currentUser would let me run the hook in the root of the functional component after the local (currentUser) state updates inside of the .then block.

Functional Component

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;

This is the useTypedSelector hook

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

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

This is my userReducer for context

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;

Notes

I'm using Immer so I can easily modify the immutable state

If I could just connect my component to the Redux store so that I could dispatch the action directly from my component - that'd be great too.

I'm about ready to switch to the context API because Redux is nowhere as intuitive as Vuex is.

Answer 1

This isn't even a Redux issue. As you mentioned, it's a React "rules of hooks" issue. All hook calls must be at the top level of a function component or another custom hook, and can never be nested inside conditional statements.

It's actually not clear from the current code what you're trying to do here. If we ignore the hooks rules aspect, the selector usage itself doesn't seem correct:

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

Even if this was legal usage, it doesn't do anything useful:

• The selector is ignoring the user field being destructured from the state, and returning the currentUser variable already in scope
• useSelector always returns the value that your selector extracts from the Redux state object, but here the return value is being ignored completely

I think what you're saying is that "when I get a new user object from Firebase, I want to update the Redux store to hold that user data". In that case, what you actually need is to dispatch an action, which is the opposite of selecting data from the state.

Assuming that's the case, then a correct approach here would probably involve dropping the useState<UserData> completely, and using the React-Redux useDispatch hook to let you dispatch actions from within the component:

// 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>
  );
};

I think you're missing some key bits of understanding for how Redux works and how to use it correctly. I'd strongly recommend reading through the "Redux Essentials" tutorial in our Redux core docs, which teaches "how to use Redux, the right way".

A couple other notes on the code:

• You shouldn't be instantiating "instances" like a Github auth provider inside render logic. Do that in an effect, or just directly in the click handler
• You should also be using our official Redux Toolkit package to write your Redux logic (reducers, etc). RTK already has Immer built in, and is designed for a good TS usage experience. In particular, the createSlice API will auto-generate action creators and action types for you based on the reducers you define.
• It's generally recommended to not use the React.FC type. Instead, just declare the type of props in the component, if there are any, and let TS infer the return type.