NextJS+Redux实现跳转新页面后触发动作的问题求助

问题根源 #

你当前的代码中，router.push('/')是异步执行的，跳转后/sign-in页面的组件会被卸载，后续的dispatch(toggleFilterMenu())是在即将销毁的组件实例中执行的，首页的组件无法感知到这个状态变化，因此菜单不会打开。

解决方案一：通过URL查询参数传递状态 #

这种方法不需要修改Redux结构，利用URL参数标记需要打开菜单，首页加载时检测参数并触发动作：

1. 修改Search按钮点击事件 #

const searchClickHandler = useCallback(() => {
  if (window.location.pathname !== '/') {
    // 跳转首页时携带openMenu参数
    router.push('/?openMenu=true');
  } else {
    // 已在首页，直接触发菜单切换
    dispatch(toggleFilterMenu());
  }
}, [dispatch, router]);

2. 在首页（或全局导航栏）添加参数检测逻辑 #

在首页组件或导航栏组件中，添加useEffect监听URL参数：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import { toggleFilterMenu } from '@/redux/slices/filterSlice';

const HomePage = () => {
  const router = useRouter();
  const dispatch = useDispatch();

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('openMenu')) {
      // 触发菜单打开动作
      dispatch(toggleFilterMenu());
      // 清除URL参数（避免刷新/回退时重复触发）
      router.replace('/', undefined, { shallow: true });
    }
  }, [dispatch, router]);

  // 页面其他逻辑...
};

export default HomePage;

解决方案二：通过Redux临时状态传递 #

如果不想暴露URL参数，可以在Redux中添加一个临时状态，标记首页加载时需要打开菜单：

1. 修改Redux Slice #

在你的filter相关slice中添加临时状态：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  isMenuOpen: false,
  // 新增临时状态：标记首页是否需要打开菜单
  shouldOpenMenuOnHome: false,
};

const filterSlice = createSlice({
  name: 'filter',
  initialState,
  reducers: {
    toggleFilterMenu: (state) => {
      state.isMenuOpen = !state.isMenuOpen;
    },
    setShouldOpenMenuOnHome: (state, action) => {
      state.shouldOpenMenuOnHome = action.payload;
    },
    resetShouldOpenMenuOnHome: (state) => {
      state.shouldOpenMenuOnHome = false;
    },
  },
});

export const { toggleFilterMenu, setShouldOpenMenuOnHome, resetShouldOpenMenuOnHome } = filterSlice.actions;
export default filterSlice.reducer;

2. 修改Search按钮点击事件 #

const searchClickHandler = useCallback(() => {
  if (window.location.pathname !== '/') {
    // 先设置临时状态，再跳转首页
    dispatch(setShouldOpenMenuOnHome(true));
    router.push('/');
  } else {
    dispatch(toggleFilterMenu());
  }
}, [dispatch, router]);

3. 在首页（或导航栏）监听临时状态 #

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { toggleFilterMenu, resetShouldOpenMenuOnHome } from '@/redux/slices/filterSlice';

const HomePage = () => {
  const dispatch = useDispatch();
  const shouldOpenMenu = useSelector(state => state.filter.shouldOpenMenuOnHome);

  useEffect(() => {
    if (shouldOpenMenu) {
      // 触发菜单打开
      dispatch(toggleFilterMenu());
      // 重置临时状态
      dispatch(resetShouldOpenMenuOnHome());
    }
  }, [dispatch, shouldOpenMenu]);

  // 页面其他逻辑...
};

export default HomePage;

两种方案都能解决问题，你可以根据需求选择：URL参数方案更轻量，Redux临时状态方案更隐蔽，不会在URL中暴露参数。

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