动作被调用但没有在 redux 中执行

Question

我正在尝试构建登录应用程序。它工作正常但在刷新时所有状态都丢失了。当我登录应用程序时 [从登录页面] 从后端接收到一个令牌，我将该令牌存储在本地并调用最终获取用户信息并存储它的操作“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）在从其他操作调用时工作正常，但在我们刷新时不工作 window。调试时显示以下行为。

我的useEffect被调用

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

Answer 1

答案很简单:)

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

您正在提供功能 userActions.loadUser，即 returns 另一个功能。此返回函数永远不会执行。

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

动作被调用但没有在 redux 中执行

Action is called but didn't executed in redux

reactjs

redux

react-redux

react-hooks