Using NextJS and Redux.

Let me briefly explain as it seems complicated without understanding the website mechanic.

My Website Buttons:

1. Home (Goes to homepage)
2. Search (Opens search menu in homepage)
3. Sign In (Goes to sign in page)

Imagine having 3 buttons in the navigation bar. First button goes to '/' page. Second button's function is to open up a sliding menu that is only available in page '/'. Third button takes you to '/sign-in' page. Remember the second button. So if the second button is clicked when the website is on '/' page, there is no problem with the sliding menu opening and closing. But, if lets say I am in '/sign-in' page and clicked on the sliding menu opening button, I want my website to first go to '/' page, then open up the sliding menu.

Snippet goes to the '/' page but fails to execute the next line of code.

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

I tried using Thunk principle inside Redux but as you may know useRouter hook cannot be used inside a Redux file. I tried async await keywords but dispatch method gives warning saying that I cannot use await for dispatch method.

Any help would be appreciated.

CodePudding user response：

You could pass some "state" in the PUSH to the "/" route and check this in the receiving component. In other words, effect a navigation to the "/" route first, and then in that component check if the search menu should be opened.

Example:

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

const router = useRouter();

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

CodePudding user response：

If I am understanding correctly. Then, You can use the useEffect. Hook to trigger the function that opens the sliding menu after the component has finished rendering.

import { useEffect } from 'react';

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

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

When the button is clicked, hook will be triggered and will check the and the current path, and then it's open the menu.

CodePudding user response：

OK actually, I found out that both answers and my method actually works. Problem was with another action called resetSlidingMenuStates intercepts with what I want to accomplish in every new page reload... I spent 2 hours on this but now while tinkering, found out it was because of another action I put.

We can lock the this thread. Thanks.