React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhausCompiled with warnings

Question

Error while dispatching an action!

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhausCompiled with warnings.

App.js :-

function App() {
  const user = null;
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(userAuth => {
      if (userAuth) {
        dispatch(login({
          uid: userAuth.uid,
          email: userAuth.email
        }));
      } else {
        dispatch(logout);
      }
    })
    return unsubscribe;
  }, []);

userSlice.js :-

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    }
  },
  logout: (state) => {
    state.user = null;
  }
});

export const { login, logout } = userSlice.actions;

store.js :-

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

If you want to remove the warning of useEffect missing the dependency dispatch, then add it as a dependency. useEffect(() => ... , [dispatch]) — windowsill, Dec 13 '21 at 06:38
But the screenshot you posted is a different error. It's saying that `logout` is undefined, when it should be an object. Is it? How are you importing it? — windowsill, Dec 13 '21 at 06:39
This is how I've imported logout - import { login, logout } from './features/userSlice'; — Ashmita Singh, Dec 13 '21 at 06:50
According to the front page https://redux-toolkit.js.org/api/createslice shouldn't logout be inside the reducers object? — windowsill, Dec 13 '21 at 06:55

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhausCompiled with warnings

0 Answers0