反应useEffect未触发

Question

我的 useEffect 代码如下所示：

  useEffect(() => {
    if (user) {
      setBalance(user.user_balance);
      console.log("user.user_balance");

      console.log(user.user_balance);
    }
  }, [user]);

完整代码：https://pastebin.com/CP6sLNQZ

useEffect 应该在每次用户（user_balance）在数据库中更新但没有被触发时触发。 User 是一个 props，它是从 redux 传递给组件的。

更新余额的动作在这里：

import axios from "axios";
import { returnErrors } from "./errorActions";
import { UPDATE_BALANCE_SUCCESS } from "./types";

//update balance
export const updateBalance = ({ email, user_balance }) => (dispatch) => {
  // Headers
  const config = {
    headers: {
      "Content-Type": "application/json",
    },
  };

  // Request body
  const body = JSON.stringify({ email, user_balance });

  axios
    .post("/api/users/updatebalance", body, config)
    .then((res) =>
      dispatch({
        type: UPDATE_BALANCE_SUCCESS,
        payload: { email, user_balance },
      })
    )
    .catch((err) =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
};

减速器：

import { UPDATE_BALANCE_SUCCESS } from "../actions/types";

const initalState = {
  email: null,
  user_balance: null,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case UPDATE_BALANCE_SUCCESS:
      return {
        ...state,
        email: action.payload.email,
        user_balance: action.payload.user_balance,
      };
  }
}

还有终点：

// @route       POST api/users/updatebalance
// @description Update user balance
// @access      Public
router.post("/updatebalance", (req, res) => {
  const { email, user_balance } = req.body;

  User.findOneAndUpdate(
    { email },
    { $inc: { user_balance: user_balance } },
    function (err, result) {
      if (err) {
        res.send(err);
      } else {
        res.send(result);
      }
    }
  );
});

还有 auth 的来源：

这是 auth reducer：https://pastebin.com/upHdvtiF

这些是行动：https://pastebin.com/Ajp7S1Yi

这是终点：https://pastebin.com/NwCHCitY

我有一个登录和注册页面，一旦用户注册，就会创建身份验证。在操作链接中，您可以看到登录和注册操作。

Answer 1

我认为你必须添加用户层

const initalState = {
  user: {
     email: null,
     user_balance: null,
  }
};

和减速器

export default function (state = initialState, action) {
  switch (action.type) {
    case UPDATE_BALANCE_SUCCESS:
      return {
        ...state,
        user: {
           ...state.user,
           email: action.payload.email,
           user_balance: action.payload.user_balance,
        }
      };
    }
 }