redux 如何重定向到新页面并启动操作？

nzrxty8p 于 2022-12-19 发布在其他

关注(0)|答案(3)|浏览(151)

使用NextJS和Redux。
让我简单地解释一下，因为它似乎复杂的不了解网站的机制。
我的网站按钮：
1.首页（移至首页）
1.搜索（在主页中打开搜索菜单）
1.登录（转到登录页面）
想象一下，在导航栏中有3个按钮。第一个按钮转到“/”页。第二个按钮的功能是打开一个滑动菜单，该菜单只在“/”页中可用。第三个按钮将您带到“/登录”页。记住第二个按钮。因此，如果在网站位于“/”页时单击第二个按钮，则滑动菜单的打开和关闭不会有问题。但是，如果让我们说我在'/登录'页，并点击了滑动菜单打开按钮，我想我的网站首先去'/'页，然后打开滑动菜单。

代码段转到“/”页，但无法执行下一行代码。

const searchClickHandler = useCallback(() => {
    if (window.location.pathname !== '/') {
      router.push('/');
    }
    dispatch(toggleFilterMenu());
  }, [dispatch, router]);

我尝试在Redux中使用Thunk原则，但正如你可能知道的，useRouter钩子不能在Redux文件中使用。我尝试异步等待关键字，但调度方法给出警告，说我不能使用等待调度方法。
任何帮助都将不胜感激。

redux

来源：https://stackoverflow.com/questions/74839380/how-to-redirect-to-new-page-and-fire-up-the-action

3条答案

按热度按时间

u4vypkhs1#

您可以在PUSH中将一些"状态"传递给"/"路由，并在接收组件中进行检查，换句话说，首先导航到"/"路由，然后在该组件中检查是否应该打开搜索菜单。
示例：

const searchClickHandler = useCallback(() => {
  router.push(
    {
      pathname: "/",
      query: { openMenu: true }
    },
    "/"
  );
}, [dispatch, router]);

const router = useRouter();

useEffect(() => {
  if (router.query.openMenu) {
    dispatch(toggleFilterMenu());
  }
}, [router]);

赞(0）回复(0）举报 2022-12-19

gg58donl2#

如果我没理解错的话，那么，您可以使用useEffect.hook来触发在组件渲染完成后打开滑动菜单的函数。

import { useEffect } from 'react';

const searchClickHandler = useCallback(() => {
  dispatch(toggleFilterMenu());
}, [dispatch]);

useEffect(() => {
  if (window.location.path !== '/') {
    router.push('/');
  }
  searchClickHandler();
}, [searchClickHandler, router]);

当按钮被点击时，钩子将被触发并检查当前路径，然后打开***菜单***。

赞(0）回复(0）举报 2022-12-19

bq3bfh9z3#

好吧，事实上，我发现答案和我的方法都有效。问题是另一个名为resetSlidingMenuStates的操作拦截了我想在每个新页面重新加载中完成的任务...我花了2个小时在这上面，但现在在修修补补时，发现这是因为我放置的另一个操作。
我们可以锁定这个线程。谢谢。

赞(0）回复(0）举报 2022-12-19