Как изменить состояние притока после изменения маршрута

Question

Я пытался изменить / сбросить состояние редукса при изменении маршрута в моем приложении реакции.

Причина, по которой я хочу это сделать:
I У меня есть Навигация, которую я могу переключать с помощью кнопки, чтобы она была видимой / скрытой с использованием избыточного состояния. Это работает, как и ожидалось, но проблема в том, что когда я go на другой маршрут, состояние остается прежним. Так что навигация по-прежнему будет видна. Я хочу быть в состоянии изменить состояние притока в его начальное состояние после изменения маршрута.

Мой компонент навигации (Nav. js) выглядит следующим образом:

import React from 'react'
import { NavLink } from 'react-router-dom'
import {
  MdMenu,
  MdKeyboardArrowDown
} from 'react-icons/md'

// Redux
import { useSelector, useDispatch } from 'react-redux'
import { toggleUserNav } from '../redux/actions/navActions'

const Nav = () => {
  const dispatch = useDispatch()
  const isAuthed = useSelector(state => state.user.authenticated)
  const userNavIsOpen = useSelector(state => state.nav.userNavIsOpen)

  const handleToggleUserNav = () => {
    dispatch(toggleUserNav())
  }

  let navLinks
  let userLinks

  if (!isAuthed) {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/om-poddifi">Om Poddifi</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <div><a href="/logga-in">Logga in förfan</a></div>
      </React.Fragment>
    )

  } else {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/min-lista">Min lista</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <button onClick={handleToggleUserNav} className="user-dropdown-btn">
          <div className="user-avatar"></div>
          <div className="user-name">Jonas</div>
          <div className="user-dropdown__arrow">
            <MdKeyboardArrowDown />
          </div>
        </button>
        <nav className={`user-nav ${userNavIsOpen ? 'isOpen' : ''}`}>
          <ul>
            <li>
              <NavLink className="user-nav__link" to="/">
                Min lista
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/min-lista">
                Redigera profil
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Inställningar
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Logga ut
              </NavLink>
            </li>
          </ul>
        </nav>
      </React.Fragment>
    )
  }

  return (
    <div className="top-bar">
      <div className="top-bar-inner">
        <div className="nav-toggle">
          <button
            onClick={handleToggleMainNav}
            className="nav-toggle__btn">
            <MdMenu />
          </button>
        </div>
        <div className="logo">
          <NavLink to="/">Poddifi</NavLink>
        </div>
        <ul className="main-nav">
          {navLinks}
        </ul>
        <div className="secondary-nav">
          {userLinks}
        </div>
      </div>
    </div>
  )
}

export default Nav

Мой редуктор навигации (navReducer. js) выглядит следующим образом: это:

import { LOCATION_CHANGE } from 'react-router-redux'
import { TOGGLE_MAIN_NAV } from '../types'

const initialState = {
  mainNavIsOpen: false
}

export default function (state = initialState, action) {
  switch (action.type) {
    case TOGGLE_MAIN_NAV:
      return {
        ...state,
        mainNavIsOpen: !state.mainNavIsOpen
      }
    case LOCATION_CHANGE: 
      return initialState
    default:
      return state
  }
}

Моя навигация (navActions. js) выглядит следующим образом:

import { TOGGLE_MAIN_NAV } from '../types'

export const toggleMainNav = () => dispatch => {
  dispatch({ type: TOGGLE_MAIN_NAV })
}

Что я пробовал чтобы сделать это до сих пор:
Я пытался использовать 'LOCACTION_CHANGE' из Reaction-router-redux, но безуспешно.

Кто-нибудь, кто может указать мне в правильном направлении, как действовать?

Answer 1

Вы можете реализовать хук useLocation, который обновляется при каждом изменении местоположения. Реализуйте свой сценарий изменения местоположения.

useLocation: React Router