Next.js中使用useDispatch触发Maximum update depth exceeded错误求助

错误原因 #

你在页面组件的函数体中直接调用dispatch(systemLoaded("new name-1"))，会触发无限循环：

1. 组件渲染 → 执行dispatch → Redux状态更新
2. 状态更新触发组件重新渲染 → 再次执行dispatch → 状态再次更新
   循环往复最终超出最大更新深度限制。

解决方案 #

1. 将dispatch放入useEffect中（仅执行一次） #

把dispatch逻辑包裹在useEffect里，传入空依赖数组，确保只在组件挂载时执行一次：

"use client";
import { AppState, systemLoaded } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";

const index = () => {
  const dispatch = useDispatch();
  const { data } = useSelector((state: AppState) => state.system);

  useEffect(() => {
    dispatch(systemLoaded("new name-1"));
  }, [dispatch]);

  return <div>Contact {data?.name}</div>;
};

export default index;

2. 优化Redux Slice的Reducer写法 #

Redux Toolkit内置Immer，允许直接修改state（无需手动解构赋值），你的reducer可以简化为更规范的写法：

export const systemSlice = createSlice({
  name: "system",
  initialState: initialSystemState,
  reducers: {
    systemLoaded(state, { payload }) {
      // 直接修改state，Immer自动处理不可变更新
      state.data.name = payload;
      // 若需替换整个data对象，可写成：
      // state.data = { name: payload };
    },
  },
});

原写法return (state = { ...state, data: { name: payload } });冗余且不符合RTK最佳实践，优化后更简洁高效。

3. 有条件的dispatch（按需执行） #

如果需要在特定条件满足时才执行dispatch，可添加判断逻辑避免无意义触发：

"use client";
import { AppState, systemLoaded } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";

const index = () => {
  const dispatch = useDispatch();
  const { data } = useSelector((state: AppState) => state.system);

  useEffect(() => {
    if (data?.name !== "new name-1") {
      dispatch(systemLoaded("new name-1"));
    }
  }, [dispatch, data]);

  return <div>Contact {data?.name}</div>;
};

export default index;

内容的提问来源于stack exchange，提问作者user2024080