动作被调用但未在 redux 中执行答案

【问题标题】：Action is called but didn't executed in redux动作被调用但未在 redux 中执行
【发布时间】：2021-12-17 17:49:05
【问题描述】：

我正在尝试构建登录应用程序。它工作正常，但刷新时所有状态都丢失了。当我[从登录页面]登录应用程序时，从后端接收到一个令牌，我将该令牌存储在本地并调用最终获取用户信息并存储它的操作“loadUser”。我计划在重新加载页面时使用相同的操作。由于我的导航栏页面对所有页面都是通用的，所以我创建的是使用 useEffect 挂钩从那里调用 loadUser 操作。

import React, { useEffect, Fragment } from "react";
import { useHistory } from "react-router";
import logo from "../../resources/images/desi-hip-hop.png";
import { useDispatch, useSelector } from "react-redux";
import { userActions } from "../../state/actions";
import LogoutGoogle from "../auth/LogoutGoogle";
const Navbar = (props) => {
  const dispatch = useDispatch();
  const history = useHistory();
  const isAuthenticated = useSelector((state) => state.user.isAuthenticated);

  useEffect(() => {
    try {
      dispatch(userActions.loadUser);
    } catch (error) {
      console.log("Error while loading user call");
    }
  }, []);

从这里我正在导出我在导航栏中使用的操作来调用操作。

//Will store logged in or Signed up user
export const loadUser = () => async (dispatch) => {
  console.log("load User is called");
  setAuthToken(localStorage.token);
  try {
    const res = await axios.get("/auth");
    console.log("loading user with value" + res);
    dispatch({
      type: LOAD_USER,
      payload: res.data,
    });
    console.log("loading user  completed");
  } catch (error) {
    //TODO
    dispatch({
      type: AUTH_FAIL,
      payload: error.response.data.msg,
    });
  }
};

以下操作，即 loadUser 在从其他操作调用时工作正常，但在我们刷新窗口时不能正常工作。它在调试时显示以下行为。

我的 useEffect 被调用

它到达这里但没有进入代码内部

【问题讨论】：

标签： reactjs redux react-redux react-hooks

【解决方案1】：

答案很简单：)

在useEffect 中，您应该将dispatch 函数作为参数提供，该函数将dispatch 作为参数并执行一些逻辑。

您正在提供函数userActions.loadUser，它返回另一个函数。这个返回的函数永远不会被执行。

只需将 dispatch(userActions.loadUser) 更改为 dispatch(userActions.loadUser()) 即可，一切正常

【讨论】：

非常感谢。 { 现在是时候为犯下这个愚蠢的错误而在角落里哭泣 }。