CODEWITHSUNDEEP
reactjsreduxnext.js
Codecygen
Codecygen

Reputation: 121

How to Redirect to New Page and Fire up the Action?

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.

Upvotes: 1

Views: 362

Answers (3)

DSDmark
DSDmark

Reputation: 1261

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.

Upvotes: 1

Codecygen
Codecygen

Reputation: 121

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.

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 202686

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]);

Upvotes: 1

Related Questions