Блог

Я использую React с Redux и Thunk в качестве промежуточного программного обеспечения для обработки асинхронных действий. У меня есть кнопка, на которой, когда пользователь нажимает на нее, он должен выйти из системы пользователя. В настоящее время, когда я нажимаю кнопку, ничего не происходит. Я добавил a console.log в attemptLogout , но даже это не срабатывает… Я не могу понять, почему, надеялся, что кто-нибудь сможет просмотреть мой код и предоставить некоторые отзывы.

NavProfile.js

 const onLogout = () => {
  attemptLogout();
};

<Menu.Item key={menuItem.legth   1} onClick={onLogout}>
    <span>
        <LogoutOutlined className="mr-3" />
        <span className="font-weight-normal">Logout</span>
    </span>
</Menu.Item>
  

redux/actions/Auth.js

 export const logout = () => ({
  type: LOGOUT,
});
  

redux/reducers/Auth.js

 const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: false,
  loading: true,
  error: {},
};

const auth = (state = initialState, action) => {
  const { type, payload } = action;

  switch (type) {
    ...
    case LOGOUT:
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loading: false,
      };
    default:
      return state;
  }
};
  

redux/reducers/User.js

 const initialState = {
  user: null,
  loading: true,
  error: {},
};

const user = (state = initialState, action) => {
  const { type, payload } = action;

  switch (type) {
    ...
    case LOGOUT:
      return {
        ...state,
        loading: false,
        user: null,
      };
    default:
      return state;
  }
};
  

redux/thunks/Auth.js

 // Logout User
export const attemptLogout = () => async (dispatch) => {
  console.log('Logout');
  dispatch(logout());
  dispatch(push('/auth/login'));
};
  

Вам нужно отправить attemptLogout . В противном случае thunk никогда не проходил через промежуточное ПО redux и никогда не вызывался.

 const onLogout = () => {
  dispatch(attemptLogout());
};
  

Для доступа к отправке вы можете использовать перехват в вашем компоненте меню / элемента меню. Что-то вроде:

 import {useDispatch} from 'react-redux';

function MenuExample() {
  const dispatch = useDispatch();

  const onLogout = () => {
    dispatch(attemptLogout());
  };

  ...
}