Redux Thunk 操作未执行

Question

我将 React 与 Redux 和 Thunk 一起用作中间件来处理异步操作。我有一个按钮，当用户单击它时，它应该注销用户。当前，当我单击按钮时，什么也没有发生。我在 attemptLogout 中添加了一个 console.log 但即使那样也没有触发...我不明白为什么，希望有人可以检查我的代码并提供一些反馈。

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

Answer 1

您需要派遣attemptLogout。否则 thunk 永远不会通过 redux 中间件并且永远不会被调用。

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

要访问调度，您可以使用 menu/menu 项目组件中的挂钩。类似于：

import {useDispatch} from 'react-redux';

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

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

  ...
}

Redux Thunk 操作未执行

Redux Thunk action not executing

reactjs

redux-thunk

react-redux