如何在路由更改后更改 redux 状态

Question

当我的 react-app 中的路由发生变化时，我一直在尝试更改/重置 redux 状态。

我想做的原因：
我有一个导航，我可以通过使用 redux 状态的按钮切换为可见/隐藏。这按预期工作，但问题是当我去不同的路线时，状态仍然相同。这样导航仍然可见。我希望能够在路由更改后将 redux 状态更改为其初始状态。

我的导航组件 (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 })
}

到目前为止我尝试做的事情：
我尝试使用 react-router-redux 中的 'LOCACTION_CHANGE' 没有任何成功。

谁能指出我正确的方向如何进行？

Answer 1

您可以实现 useLocation 挂钩，该挂钩会在每次位置更改时更新。实施您的位置变化方案。

useLocation: React Router